/* =============================================================================
   Hypotheek Info Punt Koos Tichelaar
   -----------------------------------------------------------------------------
   Huisstijl-uitgangspunt: de site moet herkenbaar HIP zijn (hypotheekinfopunt.nl).
   Overgenomen: het magenta #A91558, de vijf pijlerkleuren, de vijf pijlerblokken
   op de home met hun eigen belofteregel, en het "Lees verder"-pijltje.

   Eigen draai (en meteen de reden dat het geen kopie is):
   - HIP zet WIT op de felle pijlerkleuren. Gemeten: wit op #F08801 = 2,55:1,
     op #98C10F = 2,11:1, op #01A7E3 = 2,75:1. Dat haalt WCAG AA niet. Hier
     dragen de felle kleuren alleen SIER (bovenrand, icoonvlak) en staat de
     tekst in een verdiepte variant van dezelfde kleur op een lichte tint.
   - Rustiger canvas, meer witruimte, echte kaarten met schaduw in plaats van
     platte vlakken, en een hero met een gezicht erin.

   Alle contrastparen zijn gemeten (WCAG 2.1 relatieve luminantie) en staan als
   commentaar bij de kleur. Niets in dit bestand is "op het oog goed genoeg".
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Ontwerp-tokens ------------------------------------------------------ */
:root {
  /* Merk */
  --magenta:        #A91558;  /* op wit 7,15:1 (AAA), wit erop 7,15:1 (AAA) */
  --magenta-diep:   #861146;  /* op wit 9,62:1 (AAA) - hover en actief       */
  --magenta-tint:   #F8ECF2;  /* inkt erop 12,84:1                           */

  /* De vijf pijlers: fel = sier, diep = tekst, tint = vlak.
     Elke diepe kleur is verdiept tot minimaal 4,5:1 op wit EN op zijn tint. */
  --hyp-fel:   #A91558;  --hyp-diep:   #861146;  --hyp-tint:   #F8ECF2;  /* diep op tint  8,37:1 */
  --fin-fel:   #01A7E3;  --fin-diep:   #01678C;  --fin-tint:   #EBF8FD;  /* diep op tint  5,84:1 */
  --verz-fel:  #F08801;  --verz-diep:  #8F5100;  --verz-tint:  #FEF5EB;  /* diep op tint  5,82:1 */
  --pens-fel:  #98C10F;  --pens-diep:  #4F6608;  --pens-tint:  #F7FAEC;  /* diep op tint  6,13:1 */
  --spar-fel:  #717075;  --spar-diep:  #4A494D;  --spar-tint:  #F4F4F4;  /* diep op tint  8,12:1 */

  /* Gronden en tekst */
  --wit:      #FFFFFF;
  --grond:    #F7F8FA;  /* inkt erop 13,89:1 */
  --zweem:    #EAF4FB;  /* de lichtblauwe band van HIP, teruggebracht tot een
                           zweem; inkt erop 13,23:1, magenta erop 6,42:1      */
  --inkt:     #1F2933;  /* op wit 14,76:1 (AAA)  */
  --gedempt:  #5A6672;  /* op wit  5,87:1, op grond 5,52:1 - bijschriften     */
  --lijn:     #DFE3E8;
  --lijn-zacht: #EDF0F3;

  /* Vorm */
  --straal:      14px;
  --straal-klein: 8px;
  --schaduw:      0 1px 2px rgba(31, 41, 51, .05), 0 8px 24px -12px rgba(31, 41, 51, .18);
  --schaduw-hoog: 0 2px 4px rgba(31, 41, 51, .06), 0 18px 40px -16px rgba(31, 41, 51, .28);
  --omslag:      1180px;
  --smal:        760px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--inkt);
  background: var(--wit);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; color: var(--inkt); }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); }
h2 { font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1.1em; }

a { color: var(--magenta); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--magenta-diep); }

:focus-visible {
  outline: 3px solid var(--magenta);
  outline-offset: 3px;
  border-radius: 3px;
}

.omslag { width: 100%; max-width: var(--omslag); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--magenta); color: var(--wit);
  padding: 12px 20px; border-radius: 0 0 var(--straal-klein) 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: var(--wit); }

.visueel-verborgen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Kop ----------------------------------------------------------------- */
.balk {
  background: var(--magenta);           /* wit erop 7,15:1 (AAA) */
  color: var(--wit);
  font-size: .85rem;
}
.balk .omslag {
  display: flex; flex-wrap: wrap; gap: 4px 22px;
  align-items: center; justify-content: flex-end;
  min-height: 38px;
}
.balk-contact { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: center; }
/* Koos en Antoinet elk met nummer en mail (2026-10-28); op smal alleen de nummers. */
.balk-persoon { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
@media (max-width: 620px) {
  /* Op een smal scherm past alleen het telefoonnummer; het mailadres staat in
     de voet en op /contact. Het nummer links, de taalwissel rechts. */
  .balk .omslag { justify-content: space-between; }
  .balk .mail { display: none; }
  .balk-contact { gap: 2px 14px; }
}
.balk a { color: var(--wit); text-decoration: none; font-weight: 600; }
.balk a:hover { color: var(--wit); text-decoration: underline; }
.balk span { opacity: .82; font-weight: 400; }

/* ---- Taalwissel (NL | EN) ------------------------------------------------ */
/* Twee links in een pill op de magenta balk. Gemeten: wit op de pillgrond
   (16% wit over magenta = #B73A73) 5,4:1, op hover (24% = #BE4D80) 4,6:1;
   de actieve taal is magenta op wit, 7,15:1 (AAA). */
.taalwissel {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}
.taalwissel a {
  display: block; padding: 2px 10px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; letter-spacing: .03em;
}
.taalwissel a:hover { background: rgba(255, 255, 255, .24); text-decoration: none; }
.taalwissel a[aria-current="true"] { background: var(--wit); color: var(--magenta); }
.taalwissel a[aria-current="true"]:hover { background: var(--wit); color: var(--magenta-diep); }

.site-kop {
  position: sticky; top: 0; z-index: 100;
  background: var(--wit);
  border-bottom: 1px solid var(--lijn);
}
/* De kopbalk krijgt een eigen, bredere omslag dan de inhoud. Gemeten: merk 196px
   plus het menu 984px plus de tussenruimte = 1252px nodig, en dat past niet in de
   1180px van de tekstkolom. Het menu liep daardoor buiten beeld. */
.site-kop .omslag {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 88px; max-width: 1340px;
}

.merk {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  text-decoration: none; flex: none;
}
.merk img { width: 196px; height: 47px; display: block; }
@media (max-width: 400px) { .merk img { width: 162px; height: 39px; } }

.hoofdnav > ul { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.hoofdnav > ul > li > a {
  display: block; padding: 10px 9px; border-radius: var(--straal-klein);
  font-size: .88rem; font-weight: 500; color: var(--inkt); text-decoration: none;
  white-space: nowrap;
}
.hoofdnav > ul > li > a:hover { background: var(--grond); color: var(--magenta); }
.hoofdnav > ul > li > a[aria-current="page"] {
  color: var(--magenta); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--magenta);
  border-radius: var(--straal-klein) var(--straal-klein) 0 0;
}
/* ---- Uitklapmenu onder de pijlers --------------------------------------- */
.heeft-sub { position: relative; display: flex; align-items: center; }
.heeft-sub > a { padding-right: 4px; }
.sub-knop {
  display: grid; place-items: center;
  width: 22px; height: 30px; padding: 0; margin-right: 0;
  background: none; border: 0; border-radius: 6px; cursor: pointer;
  color: var(--gedempt);
}
.sub-knop:hover { color: var(--magenta); background: var(--grond); }
.sub-knop svg { transition: transform .18s ease; }
.sub-knop[aria-expanded="true"] { color: var(--magenta); }
.sub-knop[aria-expanded="true"] svg { transform: rotate(180deg); }

.subnav {
  display: block;   /* de nav-regels staan op `> ul`, dus dit blijft een kolom */
  position: absolute; z-index: 60; top: calc(100% + 10px); left: 0;
  min-width: 268px; list-style: none; margin: 0; padding: 8px;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--straal);
  box-shadow: var(--schaduw-hoog);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
/* Klein driehoekje naar de knop toe, zodat het menu bij zijn pijler hoort. */
.subnav::before {
  content: ""; position: absolute; top: -6px; left: 26px;
  width: 11px; height: 11px; background: var(--wit);
  border-left: 1px solid var(--lijn); border-top: 1px solid var(--lijn);
  transform: rotate(45deg);
}
.heeft-sub:hover > .subnav,
.heeft-sub:focus-within > .subnav,
.sub-knop[aria-expanded="true"] + .subnav {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* De brug tussen knop en menu: zonder deze strook valt het menu dicht zodra
   de muis door de tussenruimte beweegt. */
.heeft-sub::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px;
}
.subnav a {
  display: block; padding: 9px 12px; border-radius: 7px;
  font-size: .92rem; font-weight: 500; color: var(--inkt); text-decoration: none;
  white-space: normal; line-height: 1.35;
}
.subnav a:hover { background: var(--magenta-tint); color: var(--magenta-diep); }
.subnav a[aria-current="page"] { color: var(--magenta); font-weight: 600; background: var(--magenta-tint); }
.subnav-alles { border-bottom: 1px solid var(--lijn-zacht); margin-bottom: 6px; padding-bottom: 6px; }
.subnav-alles a { font-weight: 600; color: var(--magenta); }
/* Het laatste uitklapmenu klapt naar links open, anders loopt het buiten beeld. */
.hoofdnav > ul > li:nth-last-child(-n+3) .subnav { left: auto; right: 0; }
.hoofdnav > ul > li:nth-last-child(-n+3) .subnav::before { left: auto; right: 26px; }

.nav-cta { margin-left: 10px; }
/* De selector moet minstens zo specifiek zijn als
   `.hoofdnav > ul > li > a[aria-current="page"]` hierboven, anders kleurt de
   Contact-knop op de contactpagina zelf magenta op magenta (1:1, onleesbaar). */
.hoofdnav > ul > li.nav-cta > a,
.hoofdnav > ul > li.nav-cta > a[aria-current="page"] {
  background: var(--magenta); color: var(--wit); font-weight: 600;
  padding: 11px 20px; font-size: .9rem; box-shadow: none; border-radius: 999px;
}
.hoofdnav > ul > li.nav-cta > a:hover { background: var(--magenta-diep); color: var(--wit); }

.nav-knop {
  display: none; width: 46px; height: 46px; padding: 0;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--straal-klein);
  cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-knop span { display: block; width: 20px; height: 2px; background: var(--inkt); border-radius: 2px; }

@media (max-width: 1180px) {
  .nav-knop { display: flex; }
  .hoofdnav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--wit); border-bottom: 1px solid var(--lijn);
    box-shadow: var(--schaduw); display: none;
  }
  .hoofdnav[data-open="ja"] { display: block; }
  .hoofdnav > ul { flex-direction: column; align-items: stretch; padding: 12px 24px 20px; gap: 2px; }
  .hoofdnav > ul > li > a { padding: 13px 12px; }
  .hoofdnav > ul > li > a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--magenta); border-radius: var(--straal-klein); }
  .hoofdnav > ul > li.nav-cta > a { text-align: center; margin-top: 8px; }

  .heeft-sub { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .heeft-sub::after { content: none; }
  .sub-knop { width: 44px; height: 44px; }
  .subnav {
    position: static; grid-column: 1 / -1;
    min-width: 0; box-shadow: none; border: 0; border-left: 2px solid var(--lijn);
    border-radius: 0; margin: 0 0 6px 12px; padding: 0 0 0 10px;
    display: none; opacity: 1; visibility: visible; transform: none;
  }
  .subnav::before { content: none; }
  /* Op een aanraakscherm bestaat hover niet: alleen de knop opent hier. */
  .heeft-sub:hover > .subnav, .heeft-sub:focus-within > .subnav { display: none; }
  .sub-knop[aria-expanded="true"] + .subnav,
  .heeft-sub:focus-within > .sub-knop[aria-expanded="true"] + .subnav { display: block; }
  .subnav a { padding: 10px 8px; }
}

/* ---- Kruimelpad ---------------------------------------------------------- */
.kruimels { background: var(--grond); border-bottom: 1px solid var(--lijn-zacht); font-size: .85rem; }
.kruimels ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 12px 0; }
.kruimels li + li::before { content: "›"; margin-right: 8px; color: var(--gedempt); }
.kruimels a { color: var(--gedempt); text-decoration: none; }   /* 5,52:1 op grond */
.kruimels a:hover { color: var(--magenta); text-decoration: underline; }
.kruimels [aria-current="page"] { color: var(--inkt); font-weight: 600; }

/* ---- Hero (home) --------------------------------------------------------- */
.hero { background: linear-gradient(180deg, var(--zweem) 0%, var(--wit) 100%); padding: 60px 0 20px; }
.hero .omslag { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .hero { padding: 40px 0 12px; } .hero .omslag { grid-template-columns: 1fr; gap: 34px; } }

.kicker {
  display: inline-block; margin-bottom: 16px;
  font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--magenta);                 /* op zweem 6,42:1 */
}
.hero h1 { margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: var(--magenta); }
.hero-tekst > p { font-size: 1.1rem; color: var(--inkt); max-width: 34em; }

.hero-acties { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; align-items: center; }

/* ---- Knoppen ------------------------------------------------------------- */
.knop {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px;
  font-size: 1rem; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.knop svg { flex: none; }
.knop--vol { background: var(--magenta); color: var(--wit); }   /* 7,15:1 */
.knop--vol:hover { background: var(--magenta-diep); color: var(--wit); transform: translateY(-1px); box-shadow: var(--schaduw); }
.knop--rand { background: var(--wit); color: var(--magenta); border-color: var(--magenta); }
.knop--rand:hover { background: var(--magenta-tint); color: var(--magenta-diep); }
/* Op een magenta vlak moet de knop zelf 3:1 halen tegen die grond (WCAG 1.4.11);
   wit vlak op magenta = 7,15:1, ruim voldoende. */
.knop--licht { background: var(--wit); color: var(--magenta); }
.knop--licht:hover { background: var(--magenta-tint); color: var(--magenta-diep); }
.knop:disabled, .knop[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

.tekstlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; text-decoration: none; color: var(--magenta);
}
.tekstlink:hover { text-decoration: underline; }
.tekstlink svg { transition: transform .15s ease; }
.tekstlink:hover svg { transform: translateX(3px); }

/* ---- Beeld-plaatshouders (fotoshoot volgt) ------------------------------- */
/* Bewust een ZICHTBARE plaatshouder en geen stockfoto: iedereen die de preview
   bekijkt moet in één oogopslag zien welke foto waar komt. */
.plaats {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center;
  padding: 26px 22px;
  min-height: 220px;
  background:
    repeating-linear-gradient(135deg, var(--magenta-tint) 0 12px, #FDF6F9 12px 24px);
  border: 2px dashed rgba(169, 21, 88, .45);
  border-radius: var(--straal);
  color: var(--magenta-diep);            /* op #F8ECF2 8,37:1 */
}
.plaats svg { color: var(--magenta); opacity: .8; }
.plaats b { font-size: .98rem; font-weight: 700; line-height: 1.35; }
.plaats small { font-size: .8rem; color: var(--gedempt); max-width: 26ch; line-height: 1.45; }
.plaats::after {
  content: "fotoshoot";
  position: absolute; top: 12px; right: 12px;
  background: var(--magenta); color: var(--wit);   /* 7,15:1 */
  font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.plaats--staand   { aspect-ratio: 4 / 5; min-height: 0; }
.plaats--liggend  { aspect-ratio: 16 / 10; min-height: 0; }
.plaats--breed    { aspect-ratio: 3.2 / 1; min-height: 0; }
@media (max-width: 760px) { .plaats--breed { aspect-ratio: 16 / 10; } }
.plaats--rond     { aspect-ratio: 1; border-radius: 50%; min-height: 0; }
.plaats--klein    { padding: 18px 14px; }
.plaats--klein b  { font-size: .88rem; }
.plaats--klein::after { display: none; }

.hero-beeld { position: relative; }
.hero-beeld .plaats { box-shadow: var(--schaduw-hoog); }

/* ---- Eigen foto's (fotoshoot oktober 2026) ---------------------------------
   Zelfde vakken als de plaatshouders; de foto vult het vak met cover en de
   uitsnede per foto staat als object-position in gegevens.py (FOTOS). */
.foto { position: relative; overflow: hidden; border-radius: var(--straal); background: var(--grond); }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto--staand  { aspect-ratio: 4 / 5; }
.foto--liggend { aspect-ratio: 16 / 10; }
.foto--breed   { aspect-ratio: 3.2 / 1; }
@media (max-width: 760px) { .foto--breed { aspect-ratio: 16 / 10; } }
.hero-beeld .foto { box-shadow: var(--schaduw-hoog); }
.hero-bordje {
  position: absolute; left: -22px; bottom: 26px;
  background: var(--wit); border-radius: var(--straal);
  box-shadow: var(--schaduw-hoog); padding: 14px 18px;
  display: flex; align-items: center; gap: 12px; max-width: 260px;
}
@media (max-width: 900px) { .hero-bordje { left: 12px; bottom: 12px; } }
.hero-bordje strong { display: block; font-size: .95rem; }
.hero-bordje span { font-size: .8rem; color: var(--gedempt); }
.hero-bordje .stip {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--magenta-tint); color: var(--magenta);
  display: grid; place-items: center;
}

/* ---- Secties ------------------------------------------------------------- */
.sectie { padding: 66px 0; }
.sectie--grond { background: var(--grond); }
.sectie--zweem { background: var(--zweem); }
.sectie--strak { padding: 44px 0; }

.sectie-kop { max-width: 44rem; margin-bottom: 34px; }
.sectie-kop p { color: var(--gedempt); margin: 12px 0 0; }
.sectie-kop--midden { margin-left: auto; margin-right: auto; text-align: center; }

/* ---- De vijf pijlers ----------------------------------------------------- */
.pijlers {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
  list-style: none; margin: 0; padding: 0;
}
@media (max-width: 1040px) { .pijlers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pijlers { grid-template-columns: 1fr; } }

.pijlers > li { display: flex; }
.pijler {
  display: flex; flex-direction: column; width: 100%;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--straal);
  overflow: hidden; text-decoration: none; color: var(--inkt);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pijler:hover { transform: translateY(-3px); box-shadow: var(--schaduw-hoog); border-color: transparent; color: var(--inkt); }
.pijler-band { height: 6px; background: var(--kleur-fel); }
.pijler-binnen { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 24px; flex: 1; }
.pijler-icoon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--kleur-tint); color: var(--kleur-diep);
  display: grid; place-items: center; margin-bottom: 4px;
}
.pijler h3 { color: var(--kleur-diep); font-size: 1.1rem; }   /* elke diepe kleur >= 4,5:1 op wit */
.pijler p { margin: 0; color: var(--gedempt); font-size: .95rem; flex: 1; }
.pijler-meer {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .9rem; font-weight: 600; color: var(--kleur-diep); margin-top: 6px;
}
.pijler:hover .pijler-meer svg { transform: translateX(3px); }
.pijler-meer svg { transition: transform .16s ease; }

/* Kleurrollen per pijler; de klasse zet de drie variabelen, de rest van de
   opmaak is voor alle vijf gelijk. */
.p-hypotheken   { --kleur-fel: var(--hyp-fel);  --kleur-diep: var(--hyp-diep);  --kleur-tint: var(--hyp-tint); }
.p-financieringen { --kleur-fel: var(--fin-fel);  --kleur-diep: var(--fin-diep);  --kleur-tint: var(--fin-tint); }
.p-verzekeringen  { --kleur-fel: var(--verz-fel); --kleur-diep: var(--verz-diep); --kleur-tint: var(--verz-tint); }
.p-pensioenen     { --kleur-fel: var(--pens-fel); --kleur-diep: var(--pens-diep); --kleur-tint: var(--pens-tint); }
.p-sparen         { --kleur-fel: var(--spar-fel); --kleur-diep: var(--spar-diep); --kleur-tint: var(--spar-tint); }

/* ---- Paginakop op binnenpagina's ----------------------------------------- */
.paginakop { background: var(--kleur-tint, var(--grond)); border-bottom: 1px solid var(--lijn-zacht); padding: 44px 0; }
.paginakop .omslag { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
@media (max-width: 780px) { .paginakop .omslag { grid-template-columns: 1fr; } }
/* Met een echt beeld wordt de kop een kleine hero: tekst links, beeld rechts. */
.paginakop--beeld { padding: 52px 0; }
.paginakop--beeld .omslag { grid-template-columns: 1fr minmax(0, 34rem); gap: 48px; }
@media (max-width: 900px) { .paginakop--beeld .omslag { grid-template-columns: 1fr; gap: 30px; } }
.paginakop-beeld {
  border-radius: var(--straal); overflow: hidden; box-shadow: var(--schaduw-hoog);
  background: var(--grond);
}
.paginakop-beeld img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.paginakop .kicker { color: var(--kleur-diep, var(--magenta)); margin-bottom: 10px; }
.paginakop p { margin: 14px 0 0; color: var(--inkt); max-width: 46em; font-size: 1.05rem; }
.paginakop-merk {
  width: 64px; height: 64px; border-radius: 18px;
  background: var(--wit); color: var(--kleur-diep, var(--magenta));
  display: grid; place-items: center; box-shadow: var(--schaduw);
}
@media (max-width: 780px) { .paginakop-merk { display: none; } }

/* ---- Lopende tekst ------------------------------------------------------- */
.tekst { max-width: var(--smal); }
.tekst h2 { margin: 2.2em 0 .6em; font-size: 1.45rem; }
.tekst h2:first-child { margin-top: 0; }
.tekst h3 { margin: 1.8em 0 .5em; font-size: 1.12rem; }
.tekst ul, .tekst ol { margin: 0 0 1.3em; padding-left: 0; list-style: none; }
.tekst ol { counter-reset: t; }
.tekst li { position: relative; padding-left: 30px; margin-bottom: .5em; }
/* Lijsten met een eigen vorm (documenten, links) doen niet mee aan de bolletjes. */
.tekst .documenten li, .tekst .linklijst li { padding-left: 0; }
.tekst .documenten > li::before, .tekst .linklijst > li::before { content: none; }
.tekst ul > li::before {
  content: ""; position: absolute; left: 6px; top: .62em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--kleur-fel, var(--magenta));
}
.tekst ol > li { counter-increment: t; }
.tekst ol > li::before {
  content: counter(t) "."; position: absolute; left: 0; top: 0;
  font-weight: 700; color: var(--kleur-diep, var(--magenta));
}
.tekst table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .95rem; }
.tekst th, .tekst td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--lijn); }

.duo { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: center; }
@media (max-width: 980px) { .duo { grid-template-columns: 1fr; gap: 34px; } }
.duo-beeld { position: sticky; top: 110px; }
@media (max-width: 980px) { .duo-beeld { position: static; } }
.lead { font-size: 1.08rem; }

.inhoud-rooster { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
@media (max-width: 980px) { .inhoud-rooster { grid-template-columns: 1fr; gap: 40px; } }

/* ---- Zijkaart ------------------------------------------------------------ */
.zijkaart {
  position: sticky; top: 104px;
  display: flex; flex-direction: column; gap: 18px;
}
@media (max-width: 980px) { .zijkaart { position: static; } }
.kaart {
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--straal); padding: 24px; box-shadow: var(--schaduw);
}
.kaart h2, .kaart h3 { font-size: 1.05rem; margin-bottom: 12px; }
.kaart p { font-size: .93rem; color: var(--gedempt); }
.kaart--magenta { background: var(--magenta); border-color: var(--magenta); }
/* Koppen erven de kleur van .kaart niet (h2/h3 zetten color hard), dus hier
   expliciet: wit op magenta = 7,15:1 (AAA). */
.kaart--magenta, .kaart--magenta h2, .kaart--magenta h3, .kaart--magenta p, .kaart--magenta strong { color: var(--wit); }
.kaart--magenta a:not(.knop) { color: var(--wit); }

.zijmenu ul { list-style: none; margin: 0; padding: 0; }
.zijmenu li + li { border-top: 1px solid var(--lijn-zacht); }
.zijmenu a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 0; text-decoration: none; color: var(--inkt); font-size: .95rem;
}
.zijmenu a:hover { color: var(--magenta); }
.zijmenu a[aria-current="page"] { color: var(--kleur-diep, var(--magenta)); font-weight: 600; }
.zijmenu svg { flex: none; opacity: .45; }
.zijmenu a:hover svg { opacity: 1; }

.tijden { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tijden th { text-align: left; font-weight: 500; padding: 6px 0; vertical-align: top; }
.tijden td { text-align: right; padding: 6px 0; vertical-align: top; }
.tijden small { color: var(--gedempt); font-size: .8rem; }
.tijden tr + tr th, .tijden tr + tr td { border-top: 1px solid var(--lijn-zacht); }

.contactregel { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; font-size: .95rem; }
.contactregel:last-child { margin-bottom: 0; }
.contactregel svg { flex: none; margin-top: 3px; opacity: .75; }

/* ---- Kaartenrooster ------------------------------------------------------ */
.rooster { display: grid; gap: 18px; list-style: none; margin: 0; padding: 0; }
.rooster--2 { grid-template-columns: repeat(2, 1fr); }
.rooster--3 { grid-template-columns: repeat(3, 1fr); }
.rooster--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .rooster--3, .rooster--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .rooster--2, .rooster--3, .rooster--4 { grid-template-columns: 1fr; } }

.tegel {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--straal);
  padding: 22px; text-decoration: none; color: var(--inkt); height: 100%;
  border-left: 4px solid var(--kleur-fel, var(--magenta));
  transition: transform .16s ease, box-shadow .16s ease;
}
.tegel:hover { transform: translateY(-2px); box-shadow: var(--schaduw-hoog); color: var(--inkt); }
.tegel h3 { font-size: 1.05rem; }
.tegel p { margin: 0; font-size: .92rem; color: var(--gedempt); flex: 1; }
.tegel .pijler-meer { color: var(--kleur-diep, var(--magenta)); }

/* Verzekeringen: de particuliere verzekeringen zonder eigen pagina, onder de
   tegels (verzoek klant 2026-10-21). Vinkje in --kleur-diep (verz: 5,82:1 op
   tint, 6,52:1 op wit); tekst in --inkt op wit 14,76:1. */
.ook-verzekerd {
  margin-top: 22px; padding: 24px; background: var(--kleur-tint, var(--magenta-tint));
  border-radius: var(--straal);
}
.ook-verzekerd h3 { font-size: 1.05rem; margin-bottom: 14px; }
.vinklijst {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 22px;
}
.vinklijst li { display: flex; align-items: center; gap: 10px; font-size: .95rem; }
.vinklijst svg { flex: none; color: var(--kleur-diep, var(--magenta)); }
.ook-verzekerd p { margin: 0; font-size: .95rem; }
.ook-verzekerd a { color: var(--kleur-diep, var(--magenta)); font-weight: 600; }

/* ---- Nieuws: de twee Contaqt-widgets ------------------------------------ */
/* De artikelen komen live uit Contaqt (zie bron/bouw.py, "Nieuws"). Beide
   widgets brengen hun eigen opmaak mee (Roboto, gestippelde lijnen, blauwe
   overlays, vaste kaarthoogtes); alles hieronder trekt dat naar de huisstijl.
   De post-widget zet een deel van zijn stijl als inline style (hoogte,
   achtergrond, kleuren), vandaar de !important op precies die regels. De
   widget-stylesheets laden NA deze; de selectors hier winnen op specificiteit
   (extra klasse of id), niet op volgorde. */

/* Home: de drie nieuwste (artikel-API), dezelfde kaart als de rest van de site */
#uniek-article-widget-container:empty { display: none; }
#uniek-article-widget-container .container { max-width: none; }
#uniek-article-widget-container .cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0; padding: 0;
}
@media (max-width: 940px) { #uniek-article-widget-container .cards { grid-template-columns: 1fr; } }
#uniek-article-widget-container .card {
  display: flex; flex-direction: column; width: auto; min-width: 0; max-width: none;
  margin: 0; padding: 0; overflow: hidden; text-decoration: none;
  background: var(--wit); color: var(--inkt); border: 1px solid var(--lijn); border-radius: var(--straal);
  box-shadow: none; transition: transform .16s ease, box-shadow .16s ease;
}
#uniek-article-widget-container .card:hover,
#uniek-article-widget-container .card:focus { background: var(--wit); transform: translateY(-3px); box-shadow: var(--schaduw-hoog); }
#uniek-article-widget-container .card:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }
#uniek-article-widget-container .card .card-header {
  height: auto; aspect-ratio: 16 / 9; border-radius: 0;
  background-color: var(--grond); background-blend-mode: normal;
}
#uniek-article-widget-container .card .card-header:hover,
#uniek-article-widget-container .card .card-header:focus { background-color: var(--grond); }
#uniek-article-widget-container .card .card-title,
#uniek-article-widget-container .card:hover .card-title,
#uniek-article-widget-container .card:focus .card-title {
  background: rgba(169, 21, 88, .94); opacity: 1; padding: 12px 18px;   /* magenta, wit erop 7,15:1 */
}
#uniek-article-widget-container .card .card-title h3 {
  font-size: 1.05rem; line-height: 1.25; margin: 0; padding: 0; color: var(--wit);
}
#uniek-article-widget-container .card .card-summary {
  flex: 1; margin: 0; padding: 18px 20px 6px; font-size: .92rem; line-height: 1.55; color: var(--gedempt);
}
#uniek-article-widget-container .card .card-meta,
#uniek-article-widget-container .card:hover .card-meta,
#uniek-article-widget-container .card:focus .card-meta {
  position: static; max-height: none; margin: 0; padding: 0 20px 20px;
  font-size: .8rem; font-weight: 500; color: var(--gedempt);
}
#uniek-article-widget-container * { transition-duration: .16s; }
.nieuws-alle { margin: 30px 0 0; }

/* /nieuws: de post-widget. Eerst de schil die de widget om zichzelf heen zet. */
.contaqt-nieuws { font-family: inherit; }
.contaqt-nieuws .article-body,
.contaqt-nieuws .uniek-wrapper {
  float: none; width: auto; margin: 0 !important; padding: 0 !important;
  background: transparent !important; overflow: visible;
}
.contaqt-nieuws .article-content-frame {
  width: 100% !important; max-width: none !important; margin: 0; padding: 0 !important;
}
.contaqt-nieuws .uniek-post-wrap, .contaqt-nieuws .uniek-top-wrap { float: none; margin: 0; font-family: inherit; }
.contaqt-nieuws .uniek-post-wrap ul { margin: 0; padding: 0; list-style: none; }
.contaqt-nieuws .uniek-top-wrap { margin-bottom: 22px; }
.contaqt-nieuws noscript p { margin: 0; color: var(--gedempt); }
/* Zolang de widget nog laadt (dat duurt soms enkele seconden): een regel tekst
   en wat hoogte, zodat de contactband eronder niet eerst omhoog springt. */
.contaqt-nieuws:not(:has(.uniek-post-wrap, .article-content-frame > h3)) { min-height: 320px; }
.contaqt-nieuws:not(:has(.uniek-post-wrap, .article-content-frame > h3, noscript:only-child))::before {
  content: "De artikelen worden geladen..."; display: block; color: var(--gedempt); font-size: .95rem;
}

/* Het uitgelichte (nieuwste) artikel: beeld links, tekst rechts, een kaart */
.contaqt-nieuws .uniek-top-cont {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); position: relative;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--straal); overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}
@media (max-width: 780px) { .contaqt-nieuws .uniek-top-cont { grid-template-columns: 1fr; } }
.contaqt-nieuws .uniek-top-cont:hover { transform: translateY(-3px); box-shadow: var(--schaduw-hoog); }
.contaqt-nieuws .uniek-top-cont li {
  display: block; float: none; width: auto !important; height: auto !important; padding: 0 !important; position: relative;
}
.contaqt-nieuws .uniek-top-cont li:first-child { min-height: 300px; background-size: cover; background-position: center; }
@media (max-width: 780px) { .contaqt-nieuws .uniek-top-cont li:first-child { min-height: 0; aspect-ratio: 16 / 9; } }
.contaqt-nieuws .uniek-top-cont li:last-child { display: flex; flex-direction: column; }
/* De widget zet op mobiel padding: 0 !important op dit blok, vandaar !important. */
.contaqt-nieuws .uniek-top-right-cont { flex: 1; padding: 34px 36px 0 !important; max-height: none; overflow: visible; }
@media (max-width: 780px) { .contaqt-nieuws .uniek-top-right-cont { padding: 22px 22px 0 !important; } }
.contaqt-nieuws .uniek-top-right-cont h3, .contaqt-nieuws .uniek-top-right-cont h2 {
  min-height: 0; margin: 0 0 14px; padding: 0; font-size: 1.45rem; line-height: 1.2; font-weight: 700;
}
.contaqt-nieuws .uniek-top-right-cont h3::before { content: none; }
.contaqt-nieuws .uniek-top-right-cont p { margin: 0; padding: 0; font-size: 1rem; line-height: 1.6; color: var(--gedempt) !important; }
.contaqt-nieuws .uniek-post-cont-readmore-btn-cont { display: none; }
.contaqt-nieuws .uniek-top-right-cont::after { display: inline-block; margin: 18px 0 30px; }

/* De overige kaarten: een rooster, kaart in de huisstijl, hele kaart klikbaar */
.contaqt-nieuws .uniek-post-cont {
  display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 22px;
  float: none; width: auto; margin: 0 !important;
}
@media (max-width: 1040px) { .contaqt-nieuws .uniek-post-cont { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .contaqt-nieuws .uniek-post-cont { grid-template-columns: 1fr; } }
.contaqt-nieuws .uniek-post-cont li {
  display: flex !important; flex-direction: column; float: none; position: relative; overflow: hidden;
  width: auto !important; height: auto !important; max-height: none !important;
  margin: 0 !important; padding: 0 !important;
  background: var(--wit) !important; border: 1px solid var(--lijn); border-radius: var(--straal);
  transition: transform .16s ease, box-shadow .16s ease; cursor: pointer;
}
.contaqt-nieuws .uniek-post-cont li:hover { transform: translateY(-3px); box-shadow: var(--schaduw-hoog); }
.contaqt-nieuws .main-container-div-for-background { display: flex; flex-direction: column; height: 100%; background: var(--wit) !important; }
.contaqt-nieuws .uniek-image-cont { float: none; width: auto; height: auto; aspect-ratio: 16 / 9; background-color: var(--grond); }
.contaqt-nieuws .uniek-post-cont-col { flex: 1; display: flex; flex-direction: column; gap: 8px; float: none; width: auto; padding: 20px 20px 22px; }
.contaqt-nieuws .uniek-post-cont-col h3 { min-height: 0; margin: 0; padding: 0; font-size: 1.05rem !important; line-height: 1.25; }
.contaqt-nieuws .uniek-post-cont-col h3::before { content: none; }
.contaqt-nieuws .uniek-post-cont-col p { flex: 1; margin: 0; padding: 0; font-size: .92rem; line-height: 1.55; color: var(--gedempt) !important; }
.contaqt-nieuws .uniek-post-cont-col::after { margin-top: 6px; }

/* "Lees verder" met het pijltje van de site, als afsluiter van elke kaart */
.contaqt-nieuws .uniek-post-cont-col::after,
.contaqt-nieuws .uniek-top-right-cont::after {
  content: "Lees verder"; align-self: flex-start;
  font-size: .9rem; font-weight: 600; color: var(--magenta); padding-right: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A91558' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat right center / 16px 16px;
}

/* Datum: klein etiket links boven in het beeld (de widget zet een witte band onderin) */
.contaqt-nieuws .uniek-image-timer {
  top: 14px; left: 14px; right: auto; bottom: auto; width: auto; height: auto; margin: 0;
  padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .94);
  font-size: .78rem; font-weight: 600; letter-spacing: .02em; text-align: left; color: var(--inkt);
}
.contaqt-nieuws .uniek-image-timer span { padding: 0; }

/* De link van de widget bedekt de hele kaart als gekleurde overlay; hier
   onzichtbaar, zodat de kaart zelf de link is en de tekst voor schermlezers blijft. */
.contaqt-nieuws .uniek-post-cont-hvr { opacity: 1 !important; background: transparent !important; transition: none; }
.contaqt-nieuws .uniek-post-cont-hvr a { font-size: 1rem; }
.contaqt-nieuws .uniek-post-cont-hvr a span {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; background: none;
}
.contaqt-nieuws .uniek-post-cont-hvr a:focus-visible { outline: 3px solid var(--magenta); outline-offset: -3px; border-radius: var(--straal); }

/* "toon meer" als de randknop van de site */
.contaqt-nieuws .uniek-post-btn-cont { margin-top: 30px; text-align: center; }
.contaqt-nieuws .uniek-post-anchor {
  display: inline-block; margin: 0; padding: 14px 26px; border-radius: 999px;
  font-size: 1rem; font-weight: 600; text-decoration: none;
  background: var(--wit); color: var(--magenta); border: 1px solid var(--magenta);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.contaqt-nieuws .uniek-post-anchor::first-letter { text-transform: uppercase; }
.contaqt-nieuws .uniek-post-anchor:hover { background: var(--magenta-tint); color: var(--magenta-diep); }
.contaqt-nieuws .uniek-post-anchor:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }
.contaqt-nieuws .uniek-no-articles { display: block; margin-top: 12px; font-size: .92rem; color: var(--gedempt); }
.contaqt-nieuws .uniek-no-articles::first-letter { text-transform: uppercase; }

/* Het artikel zelf (?article_key=...): de widget vult de frame met de artikel-HTML
   (h3 = titel, p, figure, hr, h3 = tussenkop, ...) plus een terug-link vooraan
   en het Contaqt-reactieformulier achteraan. Leeskolom in de sitetypografie.
   Het overzicht staat in DEZELFDE frame (zonder h3 als direct kind), vandaar
   de :has(> h3): anders raken deze regels ook de kaarten. */
.contaqt-nieuws .article-content-frame:has(> h3) { max-width: 800px !important; margin: 0 auto; }
.contaqt-nieuws .article-content-frame:has(> h3) > a:first-child {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px;
  font-weight: 600; color: var(--magenta); text-decoration: none;
}
.contaqt-nieuws .article-content-frame:has(> h3) > a:first-child:hover { text-decoration: underline; }
.contaqt-nieuws .article-content-frame:has(> h3) > a:first-child .fa { padding: 0 !important; }
.contaqt-nieuws .article-content-frame:has(> h3) > h3:first-of-type {
  margin: 0 0 18px; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); line-height: 1.15; letter-spacing: -.015em;
}
.contaqt-nieuws .article-content-frame:has(> h3) > h3:first-of-type + p { font-size: 1.12rem; color: var(--inkt); }
.contaqt-nieuws .article-content-frame:has(> h3) h3 { margin: 2em 0 .6em; font-size: 1.3rem; line-height: 1.25; }
.contaqt-nieuws .article-content-frame:has(> h3) h2 { margin: 2em 0 .6em; font-size: 1.45rem; }
.contaqt-nieuws .article-content-frame:has(> h3) h4 { margin: 1.6em 0 .5em; font-size: 1.12rem; }
.contaqt-nieuws .article-content-frame:has(> h3) p { margin: 0 0 1.1em; line-height: 1.65; }
.contaqt-nieuws .article-content-frame:has(> h3) figure { margin: 26px 0; border-radius: var(--straal); overflow: hidden; text-align: left; }
.contaqt-nieuws .article-content-frame:has(> h3) figure img,
.contaqt-nieuws .article-content-frame:has(> h3) > img { display: block; width: 100%; height: auto; }
/* De widget haalt de <figure> om het kopbeeld weg; de losse img krijgt dezelfde vorm. */
.contaqt-nieuws .article-content-frame:has(> h3) > img { margin: 26px 0; border-radius: var(--straal); }
.contaqt-nieuws .article-content-frame:has(> h3) hr { border: 0; height: 1px; margin: 8px 0 24px; background: var(--lijn); }
.contaqt-nieuws .article-content-frame:has(> h3) ul, .contaqt-nieuws .article-content-frame:has(> h3) ol { margin: 0 0 1.3em; padding-left: 1.4em; list-style: disc; }
.contaqt-nieuws .article-content-frame:has(> h3) ol { list-style: decimal; }
.contaqt-nieuws .article-content-frame:has(> h3) li { margin-bottom: .45em; }
.contaqt-nieuws .article-content-frame:has(> h3) a { color: var(--magenta); }
.contaqt-nieuws .article-content-frame:has(> h3) blockquote {
  margin: 24px 0; padding: 18px 22px; border-left: 4px solid var(--magenta); background: var(--magenta-tint);
  font-style: normal; font-size: 1rem; line-height: 1.6;
}
.contaqt-nieuws .article-content-frame:has(> h3) blockquote::before { content: none; }
.contaqt-nieuws .article-content-frame:has(> h3) table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .95rem; }
.contaqt-nieuws .article-content-frame:has(> h3) th, .contaqt-nieuws .article-content-frame:has(> h3) td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--lijn); }

/* Het reactieformulier van Contaqt (de vraag onder het artikel), als kaart.
   Zelfde opzet als op de andere kantoorsites (2026-10-15): de vraag als kop, het label
   boven het veld, naam, e-mail en telefoon naast elkaar, de notitie eronder, de
   magenta knop van de site. Contaqt stuurt met id-selectors en !important
   (#active-form .form-group { display: flex }, #main_reaction_content .form-control
   { border: none !important }, plus een <style> met ".form-group label { width: 150px
   !important }"), dus de regels hieronder zijn net zo zwaar. site.js koppelt de labels
   aan hun veld (Contaqt zet een verkeerde for). */
.contaqt-nieuws .article-form {
  margin: 36px 0 0 !important; padding: clamp(20px, 4vw, 30px) !important;
  background: var(--wit) !important; border: 1px solid var(--lijn); border-radius: var(--straal); box-shadow: var(--schaduw);
}
.contaqt-nieuws .article-form .form-description {
  display: block; margin: 0; font-size: 1.3rem !important; font-weight: 700; line-height: 1.25;
  letter-spacing: -.015em; color: var(--inkt); text-wrap: balance;
}
.contaqt-nieuws .article-form #main_reaction_content { margin-top: 18px !important; }
.contaqt-nieuws .article-form .row { margin: 0 !important; }
.contaqt-nieuws .article-form [class*="col-"] { width: 100% !important; float: none !important; padding: 0 !important; min-height: 0; }
.contaqt-nieuws #active-form {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 18px; margin: 0;
}
.contaqt-nieuws #active-form .form-group { display: grid !important; gap: 6px; align-content: start; margin: 0 !important; }
.contaqt-nieuws #active-form .form-group:has(#reactionbox-note),
.contaqt-nieuws #active-form .form-group:has(button) { grid-column: 1 / -1; }
.contaqt-nieuws #active-form .form-group[class*="field-reactionbox-"] { display: none !important; }
.contaqt-nieuws #active-form .form-group:has(button) > label { display: none !important; }
.contaqt-nieuws #active-form .form-group label {
  display: block !important; width: auto !important; text-align: left !important; padding: 0 !important; margin: 0;
  font-size: .95rem !important; font-weight: 600 !important; color: var(--inkt) !important; line-height: 1.4 !important;
}
.contaqt-nieuws #main_reaction_content .form-control {   /* Contaqt zet daar border: none !important */
  width: 100% !important; height: auto !important; min-height: 48px; padding: 11px 14px !important; box-sizing: border-box;
  font: inherit; font-size: 1rem !important; color: var(--inkt) !important;
  background: var(--wit) !important; border: 1px solid #8A96A3 !important;   /* rand op wit 3,0:1 */
  border-radius: var(--straal-klein) !important; box-shadow: none !important;
}
.contaqt-nieuws #main_reaction_content .form-control:focus { outline: none; border-color: var(--magenta) !important; box-shadow: 0 0 0 3px rgba(169, 21, 88, .18) !important; }
.contaqt-nieuws #main_reaction_content .has-error .form-control { border-color: #B42318 !important; }
.contaqt-nieuws #main_reaction_content .form-btn,
.contaqt-nieuws #main_reaction_content .form-btn:hover {
  display: inline-block; width: auto !important; margin-top: 4px; padding: 13px 26px !important; border-radius: 999px !important;
  font: inherit; font-size: 1rem !important; font-weight: 600; cursor: pointer;
  color: var(--wit) !important; transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
}
.contaqt-nieuws #main_reaction_content .form-btn { background: var(--magenta) !important; border: 1px solid var(--magenta) !important; }
.contaqt-nieuws #main_reaction_content .form-btn:hover {
  background: var(--magenta-diep) !important; border: 1px solid var(--magenta-diep) !important; transform: translateY(-1px); box-shadow: var(--schaduw);
}
.contaqt-nieuws #main_reaction_content .form-btn:focus-visible { outline: 3px solid var(--magenta) !important; outline-offset: 2px; }
.contaqt-nieuws #main_reaction_content .alert { padding: 12px 16px !important; margin: 0 0 14px !important; border-radius: var(--straal-klein) !important; font-size: .95rem !important; border: 0 !important; }
.contaqt-nieuws #main_reaction_content .alert-success { background: var(--pens-tint) !important; color: var(--pens-diep) !important; }
.contaqt-nieuws #main_reaction_content .alert-warning { background: var(--verz-tint) !important; color: var(--verz-diep) !important; }
.contaqt-nieuws .article-form .alert_hide { display: none !important; }
/* Naam, e-mail en telefoon naast elkaar zolang dat past; daaronder onder elkaar. */
@media (max-width: 640px) {
  .contaqt-nieuws #active-form { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Reviews (Advieskeuze) ---------------------------------------------- */
.reviewkop {
  display: grid; grid-template-columns: 1fr auto; gap: 30px;
  align-items: center; margin-bottom: 32px;
}
@media (max-width: 780px) { .reviewkop { grid-template-columns: 1fr; } }
.reviewkop p { margin: 12px 0 0; color: var(--gedempt); max-width: 44em; }

.scorebadge {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 999px;
  padding: 10px 22px 10px 10px; box-shadow: var(--schaduw); color: var(--inkt);
}
.scorebadge:hover { border-color: var(--magenta); color: var(--inkt); box-shadow: var(--schaduw-hoog); }
.scorebadge-cijfer {
  flex: none; display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--magenta); color: var(--wit);   /* 7,15:1 (AAA) */
  font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em;
}
.scorebadge-tekst { display: flex; flex-direction: column; line-height: 1.25; }
.scorebadge-tekst strong { font-size: .98rem; }
.scorebadge-tekst span { font-size: .82rem; color: var(--gedempt); display: inline-flex; align-items: center; gap: 5px; }

.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 940px) { .reviews { grid-template-columns: 1fr; } }
.review {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--straal);
  padding: 24px; box-shadow: var(--schaduw);
}
.sterren { display: inline-flex; gap: 2px; color: #E8A33D; }  /* op wit 2,3:1, dus
  puur sier: de score staat er in cijfers naast en in het aria-label */
.review blockquote { margin: 0; flex: 1; }
.review blockquote p { margin: 0; font-size: .96rem; line-height: 1.6; }
.review footer { display: flex; flex-direction: column; gap: 2px; }
.review footer strong { font-size: .93rem; }
.review footer span { font-size: .82rem; color: var(--gedempt); }

/* ---- Team ---------------------------------------------------------------- */
.teamband { margin-bottom: 26px; }
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 900px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .team { grid-template-columns: 1fr; } }
.teamlid { display: flex; flex-direction: column; gap: 14px; }
.teamlid h3 { font-size: 1.05rem; }
.teamlid .rol { font-size: .88rem; color: var(--magenta); font-weight: 600; }
.teamlid p { margin: 0; font-size: .93rem; color: var(--gedempt); }
.teamlid .teamlid-contact a { color: var(--magenta); text-decoration: none; font-weight: 600; }
.teamlid .teamlid-contact a:hover { text-decoration: underline; }

/* Over ons, bovenaan (2026-10-29): tekst links, de foto van Koos en Antoinet
   samen groot rechts, zonder zijkolom (die liet een leeg vlak onder de tekst). */
.samen-rooster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.samen-foto .foto { box-shadow: var(--schaduw-hoog); }
/* Persoonlijk advies en documenten breed onder het bovenste deel (verzoek 2026-10-29). */
.over-kaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
.over-kaarten .kaart p:last-child { margin-bottom: 0; }
/* Verzekeringen: de tekst als kaarten naast elkaar, boven Persoonlijk advies en Documenten. */
.tekstkaarten { margin-top: 0; }
.tekstkaarten .kaart h2 { font-size: 1.25rem; margin-bottom: 12px; }
.tekstkaarten .kaart > :last-child { margin-bottom: 0; }
@media (max-width: 760px) { .over-kaarten { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .samen-rooster { grid-template-columns: 1fr; gap: 28px; } .samen-foto { max-width: 460px; } }

/* Twee teamleden (over ons, 2026-10-29): twee blokken naast elkaar, in elk
   blok de foto links en de tekst ernaast. De foto staat er HEEL op, in zijn
   eigen staande verhouding (2:3), zonder uitsnede.
   Onder 1000px de blokken onder elkaar, onder 560px de foto boven de tekst. */
.team--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.team--twee .teamlid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; align-items: start;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--straal);
  padding: 18px; box-shadow: var(--schaduw);
}
.team--twee .foto--staand { aspect-ratio: 2 / 3; }
/* Onder de foto een roze blokje met nummer en mail (verzoek 2026-10-29), zodat
   de linkerkolom meegroeit met de tekst. Wit op magenta = 7,15:1 (AAA). */
.teamlid-links { display: flex; flex-direction: column; gap: 10px; }
.teamlid-gegevens {
  margin: 0; padding: 12px 14px; border-radius: var(--straal-klein);
  background: var(--magenta); color: var(--wit); font-size: .85rem !important; line-height: 1.7;
  overflow-wrap: anywhere;
}
.teamlid-gegevens a { color: var(--wit); text-decoration: none; font-weight: 600; }
.teamlid-gegevens a:hover { text-decoration: underline; }
/* .teamlid p zet de tekst op --gedempt; hier expliciet wit, ook voor de icoontjes. */
.teamlid .teamlid-gegevens { color: var(--wit); }
.teamlid-gegevens svg { vertical-align: -3px; color: var(--wit); }
.team--twee .teamlid > div:last-child { display: flex; flex-direction: column; gap: 8px; }
.team--twee .teamlid p { font-size: .9rem; }
@media (max-width: 1000px) { .team--twee { grid-template-columns: 1fr; } .team--twee .teamlid { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); } }
@media (max-width: 560px) {
  .team--twee .teamlid { grid-template-columns: 1fr; }
  .team--twee .foto--staand { max-width: 300px; }
}

/* ---- Documentenlijst ----------------------------------------------------- */
.documenten { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; }
.doc {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border: 1px solid var(--lijn); border-radius: var(--straal-klein);
  background: var(--wit); text-decoration: none; color: var(--inkt);
}
.doc:hover { border-color: var(--magenta); background: var(--magenta-tint); color: var(--magenta-diep); }
.doc svg { flex: none; color: var(--magenta); }
.doc b { font-weight: 600; font-size: .98rem; }
.doc small { display: block; color: var(--gedempt); font-size: .82rem; }
.doc:hover small { color: var(--magenta-diep); }

/* ---- Linkslijst ---------------------------------------------------------- */
.linklijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.linkitem { border: 1px solid var(--lijn); border-radius: var(--straal); padding: 22px; background: var(--wit); }
.linkitem h3 { font-size: 1.05rem; margin-bottom: 8px; }
.linkitem p { margin: 0; color: var(--gedempt); font-size: .94rem; }

/* ---- Contactband --------------------------------------------------------- */
.band {
  background: var(--magenta); color: var(--wit);
  border-radius: var(--straal); padding: 44px;
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
}
/* Zie .kaart--magenta: koppen krijgen hun kleur expliciet. */
.band h2, .band p { color: var(--wit); }
.band p { margin: 10px 0 0; opacity: .92; max-width: 42em; }
@media (max-width: 800px) { .band { grid-template-columns: 1fr; padding: 32px 26px; } }
.band-acties { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Contactwegen (geen formulier, alleen mail en telefoon) ------------- */
.contactwegen { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; max-width: 30rem; }
.contactwegen a, .contactweg-stil {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; border: 1px solid var(--lijn); border-radius: var(--straal);
  background: var(--wit); text-decoration: none; color: var(--inkt);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.contactwegen a:hover { border-color: var(--magenta); transform: translateY(-1px); box-shadow: var(--schaduw); color: var(--inkt); }
.contactwegen-icoon {
  flex: none; width: 46px; height: 46px; border-radius: 14px;
  background: var(--magenta-tint); color: var(--magenta-diep);   /* 8,37:1 */
  display: grid; place-items: center;
}
.contactwegen b { display: block; font-size: 1.05rem; font-weight: 600; }
.contactwegen small { display: block; font-size: .85rem; color: var(--gedempt); margin-top: 2px; }
.contactweg-stil { background: var(--grond); }

.tijden { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tijden th { text-align: left; font-weight: 500; padding: 6px 0; vertical-align: top; }
.tijden td { text-align: right; padding: 6px 0; vertical-align: top; }
.tijden small { color: var(--gedempt); font-size: .8rem; }
.tijden tr + tr th, .tijden tr + tr td { border-top: 1px solid var(--lijn-zacht); }

.contactregel { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; font-size: .95rem; }
.contactregel:last-child { margin-bottom: 0; }
.contactregel svg { flex: none; margin-top: 3px; opacity: .75; }

/* ---- Voet ---------------------------------------------------------------- */
.voet { background: var(--inkt); color: #D5DBE1; padding: 56px 0 0; margin-top: 0; }
/* #D5DBE1 op #1F2933 = 10,06:1 (AAA) */
.voet-rooster { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; }
@media (max-width: 900px) { .voet-rooster { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .voet-rooster { grid-template-columns: 1fr; } }
.voet h2 { font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; color: var(--wit); margin-bottom: 16px; }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.voet a { color: #D5DBE1; text-decoration: none; font-size: .93rem; }
.voet a:hover { color: var(--wit); text-decoration: underline; }
.voet p { font-size: .93rem; margin: 0 0 10px; }
.voet-merk img { width: 200px; height: 48px; background: var(--wit); padding: 8px 12px; border-radius: var(--straal-klein); }
.voet-onder {
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 20px 0 28px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: .84rem; color: #A9B4BF;   /* op #1F2933 6,96:1 */
}

/* ---- Meldkader (preview-notities) --------------------------------------- */
.melding {
  border-left: 4px solid var(--verz-fel); background: var(--verz-tint);
  padding: 16px 20px; border-radius: 0 var(--straal-klein) var(--straal-klein) 0;
  margin: 0 0 24px; font-size: .93rem;
}
.melding strong { color: var(--verz-diep); }   /* op tint 5,82:1 */
.melding p:last-child { margin-bottom: 0; }

/* ---- Home: wie we zijn (2026-10-28) ---------------------------------------
   Tekst links, de twee portretten rechts; onder 900px onder elkaar. */
.wie-we-zijn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.wie-we-zijn h2 { margin: 6px 0 14px; }
.personen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.persoon { display: flex; flex-direction: column; gap: 10px; }
.persoon b { display: block; font-weight: 600; }
.persoon small { display: block; color: var(--gedempt); font-size: .88rem; }
@media (max-width: 900px) { .wie-we-zijn { grid-template-columns: 1fr; gap: 28px; } }

/* ---- Verzekeringen: particulier en zakelijk gelijkwaardig (2026-10-28) ----- */
.keuze { padding-bottom: 0; }
.keuzekaart {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  padding: 26px 28px; border-radius: var(--straal); text-decoration: none; color: var(--inkt);
  background: var(--kleur-tint, var(--magenta-tint)); border-left: 4px solid var(--kleur-fel, var(--magenta));
  transition: transform .16s ease, box-shadow .16s ease;
}
.keuzekaart:hover { transform: translateY(-2px); box-shadow: var(--schaduw-hoog); color: var(--inkt); }
.keuzekaart h2 { font-size: 1.35rem; margin: 0; }
.keuzekaart p { margin: 0; color: var(--inkt); flex: 1; }
.keuzekaart .pijler-meer { color: var(--kleur-diep, var(--magenta)); }
#particulieren, #ondernemers { scroll-margin-top: 110px; }
.ondernemers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.ondernemers .ook-verzekerd { margin-top: 0; background: var(--wit); border: 1px solid var(--lijn); }
.ondernemers .ook-verzekerd > p { margin: 0 0 14px; }
.ondernemers .vinklijst { grid-template-columns: 1fr; margin: 0; }
.ondernemers-blokken { display: grid; gap: 22px; }
.ondernemers-blokken .kaart p { margin: 0; }
.ondernemers-slot { margin-top: 22px; }
.ondernemers-slot p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .ondernemers { grid-template-columns: 1fr; } }
.subnav-onder { border-top: 1px solid var(--lijn-zacht); }
.subnav-onder a { font-weight: 600; color: var(--kleur-diep, var(--magenta)) !important; display: inline-flex; gap: 6px; align-items: center; }