/* TweeHuizen, huisstijl van Steven. Eén stijlblad voor alle pagina's.
   Volgorde: tokens, basis, componenten, paginavarianten, mediaqueries.
   Regels die niet onderhandelbaar zijn:
   1. Alleen deze vier kleuren plus wit. Geen afgeleide tinten.
   2. Gewone tekst is paars op crème of paars op wit.
      Aanvulling Patrick 21 september: koraal en aqua ook als tekstkleur.
      Gebruik deze accenten groot en vet op paars voor voldoende contrast.
   3. Koraal is ouder A, aqua is ouder B. Geen decoratie.
   4. Geen gradients, schaduwen of filters. De overlay van de lightbox is de
      enige transparantie. */

:root {
  --merk-paars: #36064D;
  --merk-creme: #F7F6E5;
  --merk-koraal: #DA4848;
  --merk-aqua: #76D2DB;
  --merk-wit: #FFFFFF;

  --achtergrond: var(--merk-creme);
  --oppervlak: var(--merk-wit);
  --tekst: var(--merk-paars);
  --rand: var(--merk-paars);
  --actie: var(--merk-paars);
  --op-actie: var(--merk-paars);
  --ouder-a: var(--merk-koraal);
  --ouder-b: var(--merk-aqua);
  --overlay: rgba(54, 6, 77, 0.55);

  /* Eén plek voor het lettertype. Zodra het besluit A, B of C valt, is dit
     de enige regel die verandert. */
  --letter-kop: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --letter-tekst: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ruimte-xs: 4px;
  --ruimte-s: 8px;
  --ruimte-m: 16px;
  --ruimte-l: 24px;
  --ruimte-xl: 40px;
  --ruimte-xxl: 64px;
  --rond-s: 8px;
  --rond-m: 14px;
  --rond-l: 20px;
  --lijn: 1px solid var(--rand);
  --lijn-dik: 2px solid var(--rand);
  --breedte: 800px;
}

/* ─── Basis ─────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--tekst);
  font-family: var(--letter-tekst);
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--letter-kop);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--ruimte-m);
}

h1 { font-size: clamp(32px, 6vw, 48px); }
h2 { font-size: clamp(24px, 4vw, 32px); }
h3 { font-size: 20px; }

p { margin: 0 0 var(--ruimte-m); }

a { color: var(--tekst); text-decoration: underline; text-underline-offset: 3px; }

a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--actie);
  outline-offset: 2px;
  border-radius: var(--rond-s);
}

/* Focus blijft zichtbaar op de witte voettekst. */
.footer a:focus-visible, .footer button:focus-visible, .voettekst a:focus-visible {
  outline-color: var(--actie);
}

/* De schermafbeeldingknoppen snijden een buitenliggende rand af, dus die
   markering gaat naar binnen. */
.shot-btn:focus-visible { outline: none; }
.shot-btn:focus-visible .shot { outline: 3px solid var(--actie); outline-offset: -3px; }

img { max-width: 100%; height: auto; }

/* Ankers moeten onder de vaste navigatie uit komen. */
:target, [id] { scroll-margin-top: 88px; }

.container { max-width: var(--breedte); margin: 0 auto; padding: 0 var(--ruimte-l); }

.overslaan {
  position: absolute;
  left: -9999px;
}
.overslaan:focus {
  left: var(--ruimte-m);
  top: var(--ruimte-m);
  z-index: 200;
  background: var(--oppervlak);
  padding: var(--ruimte-s) var(--ruimte-m);
  border: var(--lijn-dik);
  border-radius: var(--rond-s);
}

/* ─── Componenten ───────────────────────────────────── */

.topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--achtergrond);
  border-bottom: var(--lijn);
  padding: var(--ruimte-m) var(--ruimte-l);
  text-align: center;
}
.topnav a { margin: 0 var(--ruimte-m); text-decoration: none; font-weight: 600; }
.topnav a:hover { text-decoration: underline; }

.knop {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-s);
  padding: 14px var(--ruimte-l);
  border-radius: var(--rond-m);
  font-weight: 700;
  text-decoration: none;
  border: var(--lijn-dik);
  cursor: pointer;
}
.knop-primair { background: var(--oppervlak); color: var(--tekst); border-color: var(--actie); }
.knop-secundair { background: var(--oppervlak); color: var(--tekst); }

.kaart {
  background: var(--oppervlak);
  border: var(--lijn);
  border-radius: var(--rond-l);
  padding: var(--ruimte-l);
}

.vlak-creme { background: var(--achtergrond); }

/* Ouderkleuren: alleen als VLAK met een paars label ernaast, nooit als
   tekstkleur. Aqua krijgt een paarse contour omdat het zelf te licht is. */
.ouder-stip {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--rand);
  vertical-align: -2px;
  margin-right: var(--ruimte-xs);
}
.ouder-a { background: var(--ouder-a); }
.ouder-b { background: var(--ouder-b); }

.lijst-vink { list-style: none; padding: 0; margin: 0; }
.lijst-vink li { padding-left: 28px; position: relative; margin-bottom: var(--ruimte-s); }
.lijst-vink li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 14px;
  height: 8px;
  border-left: var(--lijn-dik);
  border-bottom: var(--lijn-dik);
  transform: rotate(-45deg);
}

details.faq {
  border-bottom: var(--lijn);
  padding: var(--ruimte-m) 0;
}
details.faq summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--ruimte-m);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font-weight: 700; }
details.faq[open] summary::after { content: "\2212"; }

.schermbeeld {
  border: var(--lijn-dik);
  border-radius: var(--rond-l);
  background: var(--oppervlak);
  padding: var(--ruimte-s);
}

.voettekst {
  background: var(--oppervlak);
  color: var(--tekst);
  padding: var(--ruimte-xl) var(--ruimte-l);
  margin-top: var(--ruimte-xxl);
}
.voettekst a { color: var(--tekst); }

.banner-cookies {
  position: fixed;
  left: var(--ruimte-m);
  right: var(--ruimte-m);
  bottom: var(--ruimte-m);
  z-index: 150;
  background: var(--oppervlak);
  border: var(--lijn-dik);
  border-radius: var(--rond-l);
  padding: var(--ruimte-l);
}

.overlay-laag {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: 140;
}

/* ─── Mediaqueries ──────────────────────────────────── */

@media (max-width: 480px) {
  body { font-size: 16px; }
  .container { padding: 0 var(--ruimte-m); }
  .topnav a { margin: 0 var(--ruimte-s); }
  .voettekst { padding: var(--ruimte-l) var(--ruimte-m); }
}

/* ─── Paginaonderdelen van index.html ───────────────── */

.hero { padding: var(--ruimte-xxl) var(--ruimte-l) var(--ruimte-xl); }
.hero-grid {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ruimte-xl);
  align-items: center;
}
.hero-kicker, .section-kicker {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--ruimte-s);
}
.hero-logo { margin-bottom: var(--ruimte-xs); }
.hero-payoff { font-size: 20px; font-weight: 600; margin-bottom: var(--ruimte-m); }
.hero-desc { max-width: 46ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--ruimte-m); margin: var(--ruimte-l) 0 var(--ruimte-m); }
.hero-phone { border: var(--lijn-dik); border-radius: var(--rond-l); overflow: hidden; background: var(--oppervlak); }
.hero-phone img { display: block; }
.hero-phone-caption { font-size: 15px; margin-top: var(--ruimte-s); text-align: center; }

.badge {
  display: inline-block;
  border: var(--lijn);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
}

.btn { /* oude naam, zelfde gedrag als .knop */
  display: inline-flex;
  align-items: center;
  padding: 14px var(--ruimte-l);
  border-radius: var(--rond-m);
  font-weight: 700;
  text-decoration: none;
  border: var(--lijn-dik);
}
.btn-primary { background: var(--oppervlak); color: var(--tekst); }
.btn-secondary { background: var(--oppervlak); color: var(--tekst); }

.pillars { padding: var(--ruimte-xl) var(--ruimte-l); }
.pillars-grid, .features-grid, .steps, .plans, .shots-row {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  gap: var(--ruimte-l);
}
.pillars-grid, .features-grid, .steps { grid-template-columns: repeat(3, 1fr); }
.plans { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.shots-row { grid-template-columns: repeat(3, 1fr); }

.pillar, .feature, .step, .plan, .story-teaser {
  background: var(--oppervlak);
  border: var(--lijn);
  border-radius: var(--rond-l);
  padding: var(--ruimte-l);
}
.pillar-icon, .feature-icon { font-size: 28px; margin-bottom: var(--ruimte-s); }

.section { padding: var(--ruimte-xxl) var(--ruimte-l); }
.section-title { margin-bottom: var(--ruimte-s); }
.section-sub { max-width: 62ch; margin-bottom: var(--ruimte-xl); }

.shot { border: var(--lijn-dik); border-radius: var(--rond-m); overflow: hidden; background: var(--oppervlak); }
.shot img { display: block; }
.shot-btn { display: block; padding: 0; border: 0; background: none; cursor: pointer; width: 100%; }

.plan { text-align: left; }
.plan.popular { border-width: 3px; }
.plan-tag {
  display: inline-block;
  border: var(--lijn);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: var(--ruimte-s);
}
.plan-name { font-weight: 700; }
.plan-price { font-size: 34px; font-weight: 700; line-height: 1.1; }
.plan-yearly, .plan-trial { font-size: 15px; font-weight: 600; }

.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom: var(--lijn); padding: var(--ruimte-m) 0; }
.faq-more { margin-top: var(--ruimte-l); }

.story-teaser { max-width: 720px; margin: 0 auto; }
.story-teaser-author { font-weight: 700; margin-top: var(--ruimte-m); }

.muted { font-size: 15px; }
.accent { font-weight: 700; }

.footer { background: var(--oppervlak); color: var(--tekst); padding: var(--ruimte-xl) var(--ruimte-l); margin-top: var(--ruimte-xxl); }
.footer a { color: var(--tekst); }
.footer-container { max-width: var(--breedte); margin: 0 auto; }
.footer-links, .footer-legal, .footer-social { display: flex; flex-wrap: wrap; gap: var(--ruimte-m); margin-bottom: var(--ruimte-m); }
.footer-copy { font-size: 15px; }
.footer-kemblinck { display: flex; align-items: center; gap: var(--ruimte-s); margin-top: var(--ruimte-l); }
.footer-kemblinck__logo { width: 32px; height: 32px; }

.lightbox {
  position: fixed;
  inset: 0;
  /* De pagina zet hem aan en uit met het hidden-attribuut. Zonder deze regel
     lag de overlay standaard over de hele pagina. */
  background: var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ruimte-l);
  /* Boven de cookiebanner (9999): de lichtbak is modaal en vangt alle focus,
     dus een banner eronder zou onbereikbaar zijn. Codex-review 21 sep. */
  z-index: 10000;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-height: 90vh; border-radius: var(--rond-m); }
.lightbox figcaption {
  /* Eigen ondoorzichtig vlak: paarse tekst op de overlay haalde maar 3,84:1. */
  background: var(--achtergrond);
  color: var(--tekst);
  border-radius: var(--rond-s);
  padding: var(--ruimte-s) var(--ruimte-m);
  margin-top: var(--ruimte-m);
  text-align: center;
}
.lightbox-close {
  position: absolute;
  top: var(--ruimte-m);
  right: var(--ruimte-m);
  background: var(--oppervlak);
  color: var(--tekst);
  border: var(--lijn-dik);
  border-radius: 999px;
  width: 44px;
  height: 44px;
  font-size: 22px;
  cursor: pointer;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: var(--ruimte-m);
  top: var(--ruimte-m);
  z-index: 200;
  background: var(--oppervlak);
  padding: var(--ruimte-s) var(--ruimte-m);
  border: var(--lijn-dik);
  border-radius: var(--rond-s);
}

@media (max-width: 860px) {
  .hero-grid, .pillars-grid, .features-grid, .steps, .plans, .shots-row {
    grid-template-columns: 1fr;
  }
  .hero { padding-top: var(--ruimte-xl); }
  .section { padding: var(--ruimte-xl) var(--ruimte-m); }
}

/* Afwisseling tussen de crème pagina en witte secties. */
.vlak-wit { background: var(--oppervlak); }

/* ─── Cookiebanner (markup komt uit consent.js) ─────── */

#th-consent {
  position: fixed;
  left: var(--ruimte-m);
  right: var(--ruimte-m);
  bottom: var(--ruimte-m);
  z-index: 9999;
  max-width: 560px;
  margin: 0 auto;
  background: var(--oppervlak);
  color: var(--tekst);
  border: var(--lijn-dik);
  border-radius: var(--rond-l);
  padding: var(--ruimte-l);
  font-size: 16px;
  line-height: 1.6;
}
#th-consent h3 { font-size: 17px; margin: 0 0 var(--ruimte-s); }
#th-consent p { margin: 0 0 var(--ruimte-m); }
#th-consent .th-btns { display: flex; gap: var(--ruimte-m); flex-wrap: wrap; }
#th-consent button {
  flex: 1;
  min-width: 140px;
  padding: 14px var(--ruimte-l);
  border-radius: var(--rond-m);
  border: var(--lijn-dik);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
#th-consent .th-accept { background: var(--oppervlak); color: var(--tekst); }
#th-consent .th-decline { background: var(--oppervlak); color: var(--tekst); }

@media (max-width: 480px) {
  #th-consent { left: var(--ruimte-s); right: var(--ruimte-s); bottom: var(--ruimte-s); padding: var(--ruimte-m); }
}

/* ─── Onderdelen van de overige pagina's ────────────── */

.page-header { padding: var(--ruimte-xxl) var(--ruimte-l) var(--ruimte-l); }
.page-kicker {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--ruimte-s);
}
.page-title { margin-bottom: var(--ruimte-s); }
.page-sub { max-width: 62ch; }

.lead { font-size: 19px; }
.quote-card, .cta-card, .contact-card, .kids-section, .category {
  background: var(--oppervlak);
  border: var(--lijn);
  border-radius: var(--rond-l);
  padding: var(--ruimte-l);
  margin-bottom: var(--ruimte-l);
}
.signature { font-weight: 700; margin-top: var(--ruimte-m); }
.highlight { font-weight: 700; }
.highlight-label {
  display: inline-block;
  border: var(--lijn);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 700;
}
.kids-caption { font-size: 15px; }
.kids-names { font-weight: 700; }

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-s);
  padding: 14px var(--ruimte-l);
  border-radius: var(--rond-m);
  border: var(--lijn-dik);
  background: var(--oppervlak);
  color: var(--tekst);
  font-weight: 700;
  text-decoration: none;
}

.category-title { margin-bottom: var(--ruimte-m); }
.category-icon { font-size: 24px; margin-right: var(--ruimte-s); }
.category-jump { display: flex; flex-wrap: wrap; gap: var(--ruimte-s); margin-bottom: var(--ruimte-xl); }
.category-chip {
  display: inline-block;
  border: var(--lijn);
  border-radius: 999px;
  padding: 8px 16px;
  text-decoration: none;
  font-weight: 600;
}
.faq { border-bottom: var(--lijn); padding: var(--ruimte-m) 0; }
.contact-icon { font-size: 24px; }
.contact-body { margin-top: var(--ruimte-s); }
.email { font-weight: 700; }
.lang-switch { font-weight: 600; }

/* 404 */
.logo { max-width: 260px; margin-bottom: var(--ruimte-l); }

/* Juridische pagina's: smalle kolom, gewone leesbare tekst. */
.juridisch { max-width: 720px; margin: 0 auto; padding: var(--ruimte-xl) var(--ruimte-l); }
.juridisch h2 { margin-top: var(--ruimte-xl); }
.juridisch .meta { font-size: 15px; margin-bottom: var(--ruimte-xl); }

.cookie-link { cursor: pointer; }

/* ─── Hersteld na het samenvoegen (Codex-review 21 sep) ── */

/* De sociale iconen hadden geen afmeting meer en het klikvlak was te klein. */
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}
.footer-social svg { width: 22px; height: 22px; }

/* 404 had geen container meer. */
.foutpagina { max-width: 560px; margin: 0 auto; padding: var(--ruimte-xxl) var(--ruimte-l); text-align: center; }

/* De knop op ons-verhaal gebruikte tokens die niet meer bestaan. */
.voorkeuren { margin-top: var(--ruimte-xl); }
.cookie-link {
  background: var(--oppervlak);
  color: var(--tekst);
  border: var(--lijn);
  border-radius: var(--rond-s);
  padding: 6px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.footer .cookie-link { background: var(--oppervlak); color: var(--tekst); border-color: var(--rand); }


/* Visuele controle, 21 september 2026. Eén ritme op alle schermformaten. */
.topnav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 24px; padding: 8px 24px; }
.topnav a { margin: 0; display: inline-flex; align-items: center; min-height: 44px; }
.topnav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.lang-switch { border-left: var(--lijn); padding-left: 24px; }
.page-header { max-width: var(--breedte); margin: 0 auto; }
.hero-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.hero-visual { width: min(100%, 280px); justify-self: center; }
.hero-logo img { width: min(100%, 360px); }
.hero-payoff { font-size: 26px; line-height: 1.3; }
.hero .badge { border: 0; padding: 0; font-weight: 400; }
.btn-primary, .knop-primair, .cta-btn { border: 3px solid var(--rand); background: var(--oppervlak); color: var(--tekst); }
.btn-secondary, .knop-secundair { border: var(--lijn); background: var(--achtergrond); }
.section > .container { max-width: 1088px; padding: 0; }
.section-sub { margin-bottom: 32px; }
.showcase { background: var(--oppervlak); }
.shots-row { gap: 32px; align-items: start; }
.shot { margin: 0; width: 100%; max-width: 280px; justify-self: center; }
.shot img { width: 100%; }
.shot figcaption { padding: 12px 16px; font-weight: 600; }
.extra-shots { margin-top: 32px; border-top: var(--lijn); padding-top: 16px; }
.extra-shots > summary { cursor: pointer; padding: 8px 0; font-weight: 600; }
.shots-extra { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; margin-top: 24px; }
.features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature { background: var(--achtergrond); border: 0; border-top: var(--lijn); border-radius: 0; padding: 24px 0 0; }
.feature p, .step p { margin-bottom: 0; }
.steps { list-style: none; padding: 0; counter-reset: stappen; }
.step { counter-increment: stappen; }
.step::before { content: counter(stappen, decimal-leading-zero); display: block; font-size: 24px; font-weight: 700; margin-bottom: 16px; }
.plans { max-width: 880px; align-items: start; }
.plan-price { margin: 12px 0; }
.plan-price small { display: block; font-size: 16px; font-weight: 400; line-height: 1.6; margin-top: 8px; }
.story-teaser blockquote, .quote-card blockquote { margin: 0; }
.download-section { text-align: center; }
.footer, .voettekst { border-top: var(--lijn); margin-top: 0; }
.footer-links { align-items: center; gap: 12px 24px; }
.footer-links > span, .footer-legal br, .footer-sep { display: none; }
.footer-legal { align-items: center; font-style: normal; gap: 8px 16px; }
.footer-kemblinck { margin-top: 0; }
.footer-kemblinck__logo { width: 22px; height: 22px; }
.story-content > h2 { margin-top: 40px; }
.highlight { font-weight: 400; border-left: 3px solid var(--rand); padding: 0 0 0 24px; margin: 32px 0; }
.highlight-label { margin-bottom: 16px; font-weight: 700; }
.cta-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
.cta-actions > a { white-space: nowrap; }
.support-content .contact-card { padding: 16px 24px; margin-bottom: 40px; }
.support-content .contact-card h2 { font-size: 20px; margin-bottom: 8px; }
.support-content .contact-body { margin: 0; }
.support-content .category { margin: 16px 0 8px; padding: 20px 24px; }
.category-title { margin: 0; }
.category-jump { margin-bottom: 24px; }
.back-topics { display: inline-block; margin-top: 40px; font-size: 15px; }
.contact-card + .back-topics { margin-top: 0; }
details.faq { padding: 0; }
details.faq summary { padding: 20px 0; align-items: baseline; }
details.faq summary::after { flex-shrink: 0; }
.faq-answer { padding-bottom: 8px; }
.faq-answer p:last-child { margin-bottom: 16px; }
.lightbox figure { max-height: calc(100dvh - 48px); max-width: 100%; }
.lightbox img { min-height: 0; max-height: calc(100dvh - 140px); width: auto; object-fit: contain; }
.lightbox figcaption { margin-top: 0; flex-shrink: 0; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-visual { width: min(100%, 260px); }
  .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shots-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .shots-extra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .topnav { gap: 0 18px; padding: 6px 12px; }
  .topnav a { font-size: 14px; }
  .topnav .lang-switch { flex-basis: 100%; justify-content: center; border-left: 0; border-top: var(--lijn); padding-left: 0; min-height: 36px; }
  :target, [id] { scroll-margin-top: 112px; }
  .page-header { padding: 40px 16px 24px; }
  .hero { padding: 32px 20px; }
  .hero-logo img { max-width: 290px; }
  .hero-payoff { font-size: 23px; }
  .hero-ctas { gap: 12px; }
  .hero-ctas .btn { justify-content: center; }
  .hero-ctas .btn-secondary { padding: 10px 16px; }
  .features-grid { grid-template-columns: 1fr; }
  .shots-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 20px; padding: 4px 4px 16px; }
  .shot { flex: 0 0 82%; max-width: 280px; scroll-snap-align: start; }
  .showcase .section-sub::after { content: " Veeg opzij om de volgende afbeelding te bekijken."; }
  .shots-extra { margin-top: 24px; }
  .plans { gap: 24px; }
  .footer-links { gap: 12px 20px; }
  .footer-legal { display: block; }
  .footer-kemblinck { display: inline-flex; margin: 0 8px 8px 4px; }
  .footer-legal > a:last-child { display: block; margin-top: 8px; overflow-wrap: anywhere; }
  .highlight { padding-left: 16px; }
  .support-content .category { padding: 16px; }
  .category-title { font-size: 23px; }
}

/* Aanvulling Patrick: herkenbaar logo en ouderkleuren als tekst. */
.topnav .nav-logo { flex-shrink: 0; margin-right: 12px; }
.nav-logo img { display: block; width: 140px; }
.footer-brand { display: inline-block; margin-bottom: 16px; }
.footer-brand img { display: block; width: 220px; }
.download-brand { display: block; width: 88px; height: auto; margin: 0 auto 24px; }
.parent-colors { display: flex; flex-wrap: wrap; gap: 16px 32px; background: var(--merk-paars); padding: 20px 24px; font-size: 28px; font-weight: 700; line-height: 1.3; }
.parent-text-a { color: var(--ouder-a); }
.parent-text-b { color: var(--ouder-b); }
.roster-legend { width: fit-content; margin: 24px 0; }
.footer-parent-colors { margin-bottom: 32px; }
@media (max-width: 600px) {
  .topnav .nav-logo { flex-basis: 100%; justify-content: center; margin: 0; min-height: 44px; }
  .nav-logo img { width: 112px; }
  :target, [id] { scroll-margin-top: 180px; }
  .parent-colors { font-size: 26px; gap: 12px 24px; padding: 20px; }
  .footer-parent-colors { flex-direction: column; gap: 8px; }
}