/* ==========================================================================
   Sterk Terug – sterkterug.nl
   Maatwerk-stylesheet (joepa). Palet aangeleverde merkcodes Claudia (#d88f94/#966d5c/#fbf4f4):
   gebroken wit / warm grijs / oudroze / taupe / warm donkerbruin.
   Tekstkleuren zijn verdonkerd t.o.v. het Wix-concept voor WCAG AA.
   ========================================================================== */

/* ---- Fonts (self-hosted, OFL) ------------------------------------------ */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-500-italic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/assets/fonts/jost-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/assets/fonts/jost-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/assets/fonts/jost-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---- Design tokens ------------------------------------------------------ */
:root {
  --blush: #FBF4F4;        /* gebroken wit met roze ondertoon (pagina) */
  --grijs: #E8DFDB;        /* warme tint uit logobruin (#966D5C ~22% op wit): rustbanden, partnerstrip, cta-strook — gelijk aan de header */
  --kop: #E8DFDB;          /* header: zelfde warme tint; navtekst #5A4A44 = 6.7:1 (WCAG AA) */
  --kop-lijn: #D8C9C1;     /* onderrand + interne lijnen van de header */
  --oudroze: #B3A1A1;      /* oudroze (dienstkaarten) */
  --roze: #D88F94;         /* logo-roze (accenten, lijnen) */
  --roze-zacht: #F2DCDE;   /* heel licht roze (chips, randen) */
  --taupe: #75625F;        /* verdiepte taupe (banden met lichte tekst) */
  --bruin: #5E4B4B;        /* warm donkerbruin (footer, knoppen) */
  --accent: #966D5C;       /* logobruin (grote koppen, decoratie) */
  --accent-diep: #7A5A49;  /* verdonkerd logobruin (kleine accenttekst) */
  --ink: #443530;          /* lopende tekst */
  --ink-zacht: #6B5A54;    /* secundaire tekst */
  --licht: #F7EFEC;        /* tekst op donkere vlakken */
  --lijn: #DEC5C8;         /* dunne lijnen */
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Jost", "Avenir Next", "Century Gothic", "Helvetica Neue", sans-serif;
  --maat: 68rem;           /* max contentbreedte */
  --maat-smal: 44rem;      /* leesbreedte proza */
}

/* ---- Basis --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--blush);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.075rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-diep); text-decoration-color: var(--roze); text-underline-offset: 3px; }
a:hover { color: var(--bruin); }
:focus-visible {
  outline: 2px solid var(--accent-diep);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection { background: var(--roze); color: #3B2B26; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--bruin); line-height: 1.15; margin: 0 0 1rem; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.3rem); }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.35rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
p { margin: 0 0 1.15rem; }
strong { font-weight: 500; }

.kicker {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-diep);
  margin: 0 0 0.9rem;
}
.sierlijn {
  width: 3.5rem; height: 1px;
  background: var(--accent);
  border: 0;
  margin: 1.4rem 0 1.6rem;
}
.gecentreerd .sierlijn { margin-left: auto; margin-right: auto; }
.gecentreerd { text-align: center; }

.omslag { width: min(var(--maat), 100% - 3rem); margin-inline: auto; }
.omslag-smal { width: min(var(--maat-smal), 100% - 3rem); margin-inline: auto; }

/* Kleine marge-hulpjes (in plaats van inline styles) */
.geen-ruimte-boven { margin-top: 0; }
.ruimte-boven { margin-top: 1.5rem; }
.ruimte-boven-groot { margin-top: 3rem; }
.kop-strak { margin-bottom: 0.2rem; }

.sectie { padding: clamp(3.2rem, 7vw, 5.5rem) 0; }
.sectie-grijs { background: var(--grijs); }
.sectie-taupe { background: var(--taupe); color: var(--licht); }
.sectie-taupe h1, .sectie-taupe h2, .sectie-taupe h3 { color: #FFF9F6; }
.sectie-taupe .kicker { color: #F6E7E3; } /* 4.76:1 op taupe (WCAG AA) */
.sectie-taupe a { color: #FFE9E4; text-decoration-color: #FFE9E4; }
.sectie-taupe a:hover { color: #FFFFFF; }

/* ---- Knoppen ------------------------------------------------------------- */
.knop {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.9rem;
  border: 1px solid var(--bruin);
  background: var(--bruin);
  color: var(--licht);
  transition: background 0.2s ease, color 0.2s ease;
  cursor: pointer;
}
.knop:hover { background: #4C3C3C; border-color: #4C3C3C; color: #FFFFFF; }
.knop-omlijnd {
  background: transparent;
  color: var(--bruin);
  border-color: var(--accent);
}
.knop-omlijnd:hover { background: var(--bruin); color: var(--licht); }
.sectie-taupe .knop-omlijnd { color: #FFF9F6; border-color: #E8D6D0; }
.sectie-taupe .knop-omlijnd:hover { background: #FFF9F6; color: var(--bruin); border-color: #FFF9F6; }

/* ---- Header / navigatie --------------------------------------------------- */
.site-kop {
  background: var(--kop);
  border-bottom: 1px solid var(--kop-lijn);
  position: sticky;
  top: 0;
  z-index: 60;
}
#inhoud { scroll-margin-top: 5.5rem; } /* anker-jumps vallen niet onder de sticky kop */
.site-kop-binnen {
  width: min(var(--maat), 100% - 2rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  flex-wrap: wrap;
}
.merk {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; color: var(--bruin);
}
.merk img { width: 44px; height: 44px; }
.merk-naam {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}
.hoofdnav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.1rem;
}
.hoofdnav a {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: #5A4A44;
  border-bottom: 1px solid transparent;
}
.hoofdnav a:hover { color: var(--bruin); border-bottom-color: var(--accent); }
.hoofdnav a[aria-current="page"] { color: var(--bruin); border-bottom-color: var(--bruin); }
.hoofdnav .nav-cta a {
  border: 1px solid var(--accent);
  margin-left: 0.5rem;
  padding: 0.45rem 1.1rem;
}
.hoofdnav .nav-cta a:hover { background: var(--bruin); border-color: var(--bruin); color: var(--licht); }

/* Hamburger-knop: alleen zichtbaar op smalle schermen */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 1px solid var(--accent);
  border-radius: 3px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--bruin);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 760px) {
  .site-kop-binnen { padding: 0.55rem 0; }
  .nav-toggle { display: inline-flex; }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hoofdnav { display: none; width: 100%; }
  .nav-open .hoofdnav { display: block; padding-bottom: 0.9rem; }
  .hoofdnav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .hoofdnav li { text-align: center; }
  .hoofdnav a {
    display: block;
    padding: 0.85rem 0.6rem;
    font-size: 0.92rem;
    border-bottom: 1px solid var(--kop-lijn);
  }
  .hoofdnav a[aria-current="page"] { border-bottom-color: var(--kop-lijn); color: var(--bruin); background: rgba(255, 255, 255, 0.45); }
  .hoofdnav .nav-cta a {
    display: inline-block;
    margin: 0.9rem auto 0;
    padding: 0.6rem 1.7rem;
    border: 1px solid var(--accent);
  }
}

/* ---- Hero (startpagina) --------------------------------------------------- */
.hero {
  padding: clamp(3rem, 8vw, 6rem) 0;
  overflow: hidden;
}
.hero-binnen {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero h1 { margin-bottom: 0.4rem; }
.tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  color: var(--accent-diep);
  margin-bottom: 1.4rem;
}
.hero-beeld { position: relative; margin: 0 14px 14px 0; }
.hero-beeld::before {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid var(--roze);
  transform: translate(14px, 14px);
  pointer-events: none;
}
.hero-beeld img { position: relative; z-index: 1; background: #FBF4F4; }
@media (max-width: 860px) {
  .hero-binnen { grid-template-columns: 1fr; }
  .hero-beeld { order: -1; max-width: 24rem; margin: 0 auto 10px; }
  .hero-beeld::before { transform: translate(10px, 10px); }
}

/* ---- Tweekoloms blokken ---------------------------------------------------- */
.duo-blok {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.duo-blok.beeld-links { grid-template-columns: 0.95fr 1.05fr; }
.kader-beeld { position: relative; margin: 0 0 12px 12px; }
.kader-beeld img {
  position: relative; z-index: 1;
  box-shadow: 0 22px 45px -28px rgba(62, 43, 38, 0.55);
}
.kader-beeld::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid var(--roze);
  transform: translate(-12px, 12px);
  pointer-events: none;
}
.sectie-taupe .kader-beeld::after { border-color: rgba(255, 244, 240, 0.55); }
@media (max-width: 860px) {
  .duo-blok, .duo-blok.beeld-links { grid-template-columns: 1fr; }
}

/* ---- Dienstkaarten (variant A: rustige 2-koloms kaarten) ------------------ */
.kaarten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  margin-top: 3rem;
}
.kaarten-drie { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .kaarten-drie { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .kaarten { grid-template-columns: 1fr; } }
.kaart {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--lijn);
  color: var(--ink);
  padding: 2.4rem 2.2rem 2rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.kaart:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 40px -28px rgba(62, 43, 38, 0.35);
}
.kaart h2 {
  color: var(--bruin);
  font-size: 1.45rem;
  margin-bottom: 0.9rem;
}
.kaart p { font-size: 0.98rem; line-height: 1.7; }
.kaart .kaart-voet { margin-top: auto; padding-top: 1.3rem; }
.kaart .kaart-link {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bruin);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}
.kaart .kaart-link:hover { color: var(--accent-diep); }

/* ---- Dienst-detailpagina's --------------------------------------------------- */
.pagina-banier { position: relative; }
.pagina-banier img { width: 100%; height: clamp(180px, 28vw, 320px); object-fit: cover; }
.broodpad {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 2.2rem;
}
.broodpad a { text-decoration: none; color: var(--ink-zacht); }
.broodpad a:hover { color: var(--bruin); text-decoration: underline; }
.broodpad span[aria-hidden] { color: var(--roze); margin: 0 0.45rem; }
.proza h2 { margin-top: 2.6rem; }
.proza h2:first-of-type { margin-top: 2.2rem; }
.proza ul { padding-left: 1.2rem; }
.proza li { margin-bottom: 0.5rem; }
.intro-groot {
  font-size: 1.18rem;
  line-height: 1.8;
  color: var(--ink-zacht);
}
.cta-strook {
  margin-top: 3.5rem;
  padding: 2.4rem 2rem;
  background: var(--grijs);
  text-align: center;
}
.cta-strook h2 { margin-bottom: 0.4rem; }
.cta-strook p { margin-bottom: 1.4rem; }
.kosten-blok {
  margin-top: 3.2rem;
  padding: 1.8rem 2rem;
  background: var(--roze-zacht);
  border-left: 3px solid var(--roze);
  border-radius: 4px;
}
.kosten-blok h2 { margin-top: 0; }
.kosten-blok h3 { margin-top: 1.6rem; font-size: 1.15rem; }
.kosten-blok p:last-child { margin-bottom: 0; }

/* "Bekijk ook"-verwijzingen op detailpagina's */
.verwijzing { margin-top: 3rem; }
.verwijzing h2 { font-size: 1.35rem; margin-bottom: 1rem; }
.verwijzing-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.verwijzing-lijst a {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--bruin);
  text-decoration: none;
  border: 1px solid var(--lijn);
  border-radius: 3px;
  background: #FFFFFF;
}
.verwijzing-lijst a:hover { border-color: var(--accent); color: var(--accent-diep); }

/* 16:9-beeld (team-hero en detailpagina's) */
.beeld-169 img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.team-hero { max-width: 56rem; margin-inline: auto; }

/* Strak beeld op detailpagina's: geen offset-kader, lijnt uit met de tekstkolom */
.detail-beeld { margin: 2.4rem 0 2.8rem; }

/* Functieregel op teamkaarten */
.kaart-functie {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--accent-diep);
  margin-bottom: 0.9rem;
}

/* Functietitel links uitgelijnd in proza (team-detailpagina's) */
.proza .functietitel { text-align: left; }
.proza .functietitel::after { left: 0; transform: none; }

/* ---- Teampagina ---------------------------------------------------------------- */
.team-kolommen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3.5vw, 2.8rem);
  margin-top: 2.6rem;
}
@media (max-width: 900px) { .team-kolommen { grid-template-columns: 1fr; } }
.team-kolommen h3 { font-size: 1.25rem; }
.functietitel {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--accent-diep);
  text-align: center;
  margin: 0.2rem 0 0;
  padding-bottom: 1rem;
  position: relative;
}
.functietitel::after {
  content: "";
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 9rem; height: 1px;
  background: var(--accent);
}
.sectie-taupe .functietitel { color: #F6E7E3; } /* 4.76:1 op taupe (WCAG AA) */
.sectie-taupe .functietitel::after { background: rgba(255, 244, 240, 0.55); }
.teamlid-kaarten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
}
@media (max-width: 760px) { .teamlid-kaarten { grid-template-columns: 1fr; } }
.teamlid {
  border-top: 1px solid rgba(255, 244, 240, 0.45);
  padding-top: 1.6rem;
}

/* ---- Social ---------------------------------------------------------------------- */
.social-knoppen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 2.4rem;
}
.social-knop {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--accent);
  color: var(--bruin);
  text-decoration: none;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.9rem;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
}
.social-knop svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.social-knop:hover { background: var(--bruin); border-color: var(--bruin); color: var(--licht); }

/* ---- Contact --------------------------------------------------------------------- */
.contact-indeling {
  max-width: 36rem;
  margin-inline: auto;
  box-shadow: 0 30px 60px -40px rgba(62, 43, 38, 0.5);
}
.contact-paneel {
  background: var(--bruin);
  color: var(--licht);
  padding: clamp(2rem, 4.5vw, 3.2rem);
}
.contact-paneel h2 { color: #FFF9F6; }
.contact-paneel a { color: #FFE9E4; }
.contact-paneel a:hover { color: #FFFFFF; }
.contact-paneel .kicker { color: var(--roze-zacht); }
.contact-regel { margin: 0 0 0.55rem; }
.contact-label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #D8C3BC;
  margin-top: 1.5rem;
  margin-bottom: 0.3rem;
}
.contact-paneel .knop {
  background: #FFF9F6;
  border-color: #FFF9F6;
  color: var(--bruin); /* 8.9:1 op FFF9F6 (WCAG AA) */
  margin-top: 0.5rem;
}
.contact-paneel .knop:hover { background: var(--roze-zacht); border-color: var(--roze-zacht); color: var(--bruin); }

/* ---- Footer ---------------------------------------------------------------------- */
.site-voet {
  background: var(--bruin);
  color: var(--licht);
  margin-top: 0;
  padding: clamp(2.8rem, 6vw, 4.2rem) 0 1.6rem;
  font-size: 0.98rem;
}
.site-voet a { color: #FFE9E4; text-decoration-color: rgba(255, 233, 228, 0.5); }
.site-voet a:hover { color: #FFFFFF; }
.voet-kolommen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid rgba(255, 244, 240, 0.22);
}
@media (max-width: 820px) { .voet-kolommen { grid-template-columns: 1fr; } }
.voet-kop {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
  color: #FFF9F6;
  margin: 0 0 1rem;
}
.site-voet ul { list-style: none; margin: 0; padding: 0; }
.site-voet li { margin-bottom: 0.45rem; }
.voet-sociaal { display: flex; gap: 0.9rem; margin-top: 1.1rem; }
.voet-sociaal a {
  display: inline-grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  border: 1px solid rgba(255, 233, 228, 0.45);
  border-radius: 50%;
  color: #FFE9E4;
}
.voet-sociaal a:hover { background: rgba(255, 233, 228, 0.14); color: #FFFFFF; }
.voet-sociaal svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.voet-onder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  padding-top: 1.4rem;
  font-size: 0.85rem;
  color: #E3D2CC;
}
.voet-onder a { color: #E3D2CC; }

/* ---- Toegankelijkheid / diversen --------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bruin);
  color: #FFFFFF;
  padding: 0.7rem 1.2rem;
  z-index: 10;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Variant A-uitbreidingen (taste-skill test 2026-07)
   ========================================================================== */
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5.6vw, 3.7rem); }
h1 em, h2 em { font-style: italic; color: var(--accent); }
.knop:active { transform: translateY(1px); }

.tekstlink {
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}
.hero-acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  margin-top: 1.8rem;
}
.hero-intro { max-width: 34rem; }
.hero-beeld img { box-shadow: 0 26px 50px -30px rgba(62, 43, 38, 0.55); }

/* Asymmetrisch kopblok: titel links, tekst rechts */
.split-blok {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 6vw, 5rem);
}
.split-blok > div:first-child h1,
.split-blok > div:first-child h2 { margin-top: 0; }
@media (max-width: 860px) { .split-blok { grid-template-columns: 1fr; } }

/* "Voor wie"-blok: logo naast de rijen */
.voorwie-blok {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.voorwie-logo img { max-width: min(100%, 21rem); margin-inline: auto; }
@media (max-width: 860px) {
  .voorwie-blok { grid-template-columns: 1fr; }
  .voorwie-logo img { max-width: 16rem; }
}

/* "Voor wie"-rijen */
.voorwie { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn); }
.voorwie li {
  display: grid;
  grid-template-columns: minmax(11rem, 16rem) 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--lijn);
}
.voorwie .wie {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--bruin);
  line-height: 1.2;
}
.voorwie p { margin: 0; color: var(--ink-zacht); }
@media (max-width: 700px) { .voorwie li { grid-template-columns: 1fr; gap: 0.3rem; } }

/* Partnerstrip (lichte band met logo's) */
.partnerstrip { text-align: center; }
.partners {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(2rem, 6vw, 4.5rem);
  margin-top: 2.2rem;
}
.partners img { width: auto; }
.partner { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.partner-hamelhuys { max-height: 96px; }
.partner-rapasso { max-height: 40px; }
.partner-beauvisage { max-height: 58px; }
.partner-proudboobs { max-height: 74px; }
.partner figcaption { font-size: 0.9rem; }
.partner figcaption a { color: var(--ink-zacht); text-decoration-color: var(--roze); }
.partner figcaption a:hover { color: var(--bruin); }
.partnerstrip .sierlijn { margin-left: auto; margin-right: auto; }

/* Hartje-ornament (lijntekening van de huidige site) */
.hartje {
  display: block;
  height: 52px;
  width: auto;
  margin: 0.6rem auto 1.4rem;
  opacity: 0.9;
}

/* Partnerstrip-links */
.partner > a { display: inline-flex; align-items: center; text-decoration: none; }

/* ---- Blog (dibbi-koppeling) ---------------------------------------------
   De dibbi-sync rendert /blog en /blog/<slug> via pages/_blog-sjabloon/;
   de inhoud-fragmenten gebruiken vaste classnamen (.blogindex__*, .blogkaart*,
   .blogartikel*), hier gestyled in de Sterk Terug-tokens. */
.blogindex__leeg { text-align: center; color: var(--ink-zacht); }
.blogindex__lijst {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.blogkaart {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--lijn);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow .2s ease;
}
.blogkaart:hover { box-shadow: 0 10px 28px rgba(94, 75, 75, .14); }
.blogkaart__beeld { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.blogkaart__inhoud { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .45rem; }
.blogkaart__datum {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-diep);
}
.blogkaart__titel {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.25;
  margin: 0;
  color: var(--accent);
}
.blogkaart__intro { margin: 0; font-size: .98rem; color: var(--ink-zacht); }
.blogartikel { max-width: var(--maat-smal); }
.blogartikel__kop { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.8rem; }
.blogartikel__titel {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  line-height: 1.15;
  margin: 0;
  color: var(--accent);
}
.blogartikel__beeld { width: 100%; border-radius: 14px; }
.blogartikel__body h2, .blogartikel__body h3 {
  font-family: var(--serif);
  color: var(--accent);
  margin: 1.6em 0 .5em;
}
.blogartikel__body h2 { font-size: 1.7rem; }
.blogartikel__body h3 { font-size: 1.35rem; }
.blogartikel__body img { border-radius: 14px; }
.blogartikel__body a { color: var(--accent-diep); }
.blogartikel__terug { margin-top: 2.8rem; }
.blogartikel__terug a { color: var(--accent-diep); }

/* ---- Bio (link in bio) --------------------------------------------------
   Losse, gecentreerde landingspagina voor de "link in bio" op social. Geen
   site-nav; hergebruikt de tokens, de social-iconen en de blogkaart-styling.
   Contrast: knoptekst var(--ink) op #FFF = 9.3:1; --ink-zacht op #FFF = 5.4:1;
   iconen op --roze-zacht zijn decoratief (aria-hidden). */
.bio-body { background: var(--blush); }
.bio {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: clamp(1.6rem, 5vw, 3rem) 1.2rem;
}
.bio-kaart {
  width: min(30rem, 100%);
  background: #FFFFFF;
  border: 1px solid var(--lijn);
  border-radius: 22px;
  box-shadow: 0 18px 48px rgba(94, 75, 75, .10);
  padding: clamp(1.8rem, 5vw, 2.6rem) clamp(1.3rem, 4vw, 2rem) clamp(1.6rem, 4vw, 2.2rem);
  text-align: center;
}
.bio-logo { display: block; width: min(15rem, 68%); margin: 0.4rem auto 0; }
.bio-logo img { width: 100%; height: auto; }
.bio-intro {
  margin: 1.4rem auto 1.8rem;
  max-width: 24rem;
  color: var(--ink-zacht);
  font-size: 1.02rem;
  line-height: 1.6;
}

.bio-acties { display: flex; flex-direction: column; gap: 0.7rem; }
.bio-knop {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--lijn);
  border-radius: 13px;
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.02rem;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.bio-knop:hover {
  color: var(--ink);
  border-color: var(--roze);
  background: var(--blush);
  transform: translateY(-1px);
}
.bio-knop-icoon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 10px;
  background: var(--roze-zacht);
  color: var(--accent-diep);
}
.bio-knop-icoon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* WhatsApp-vinkje is een gevuld silhouet; teken het als vulling. */
.bio-knop[href*="wa.me"] .bio-knop-icoon svg { fill: currentColor; stroke: none; }
.bio-knop-hoofd {
  background: var(--bruin);
  border-color: var(--bruin);
  color: #FFF9F6;
  font-weight: 500;
}
.bio-knop-hoofd:hover { background: #4C3C3C; border-color: #4C3C3C; color: #FFFFFF; transform: translateY(-1px); }
.bio-knop-hoofd .bio-knop-icoon { background: rgba(255, 249, 246, .16); color: #FFF9F6; }

.bio-sociaal {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  margin: 1.6rem 0 0.2rem;
}
.bio-sociaal a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--blush);
  border: 1px solid var(--lijn);
  color: var(--accent-diep);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.bio-sociaal a:hover { background: var(--roze); border-color: var(--roze); color: #FFFFFF; }
.bio-sociaal svg { width: 1.15rem; height: 1.15rem; fill: currentColor; display: block; }

.bio-blog {
  margin-top: 2rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--lijn);
  text-align: left;
}
.bio-blog-kop {
  font-size: 1.35rem;
  text-align: center;
  margin-bottom: 1.3rem;
}
.bio-blog-lijst { grid-template-columns: 1fr; gap: 1rem; }
.bio-blog-lijst .blogkaart__inhoud { padding: 1.05rem 1.2rem 1.2rem; }
.bio-blog-lijst .blogkaart__titel { font-size: 1.2rem; }
.bio-blog-lijst .blogkaart__intro { font-size: .92rem; }
.bio-blog-meer { text-align: center; margin: 1.3rem 0 0; }
.bio-blog-meer a {
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-diep);
}

.bio-credit { margin: 0; font-size: .82rem; color: var(--ink-zacht); }
.bio-credit a { color: var(--accent-diep); }