/* Huisstijl: docs/design.md (B-09, B-11). Go 30-09-2026 op: geen accentkleur, Roboto Slab en Roboto, de negatieve
   variant van het logo. De rest van het ontwerp volgt na de proefpagina.
   Geen inline stijlen: de CSP staat alleen dit bestand toe (style-src 'self'). */

/* Lettertypes van de eigen server (B-04), gemaakt door tools/lettertype.py. Licenties in /fonts/. */
@font-face {
  font-family: "Roboto";
  src: url("/fonts/roboto.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Slab";
  src: url("/fonts/roboto-slab.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* Kleuren uit het logo (design.md, "Kleur"); contrast op wit tussen haken. Geen accentkleur. */
:root {
  --navy: #1e2b50;         /* 13,85:1 */
  --navy-licht: #2c3c66;   /* 10,80:1: knop bij hover, lijnen op navy */
  --grijs: #878787;        /* 3,59:1: alleen randen en lijnen */
  --grijs-kop: #6f6f6f;    /* 5,02:1, op --vlak 4,61:1: de lichte regel van een kop (B-31) */
  --grijs-tekst: #595959;  /* 7,00:1 */
  --grijs-licht: #d0d0d0;  /* versiering */
  --vlak: #f4f5f8;
  --vlak-donker: #e6e9f0; /* hover op een vlak (menu op de telefoon) */
  --wit: #ffffff;
  --fout: #b42318;         /* 6,57:1 */
  --goed: #146c2e;         /* 6,53:1 */
  /* Diepte en beweging (B-14, voorstel): een schaduw alleen op wat je kunt aanklikken of wat boven iets anders ligt. */
  --schaduw: 0 1px 2px rgb(30 43 80 / .08), 0 6px 16px -6px rgb(30 43 80 / .16);
  --schaduw-hoog: 0 2px 4px rgb(30 43 80 / .08), 0 14px 28px -10px rgb(30 43 80 / .28);
  --zacht: cubic-bezier(.2, .7, .2, 1);
  --snel: 150ms;   /* feedback: knop, link (NN/g: 100 tot 400 ms, daarboven hinderlijk) */
  --gewoon: 250ms; /* een kaart die omhoog komt */
  --schuin: 3rem;  /* de schuine onderrand, als de balk in de illustraties */
  --letter-tekst: "Roboto", system-ui, sans-serif;
  --letter-kop: "Roboto Slab", Georgia, serif;
}

/* Toegankelijkheid: de skiplink is zichtbaar zodra hij focus krijgt (WCAG 2.4.1). */
.skip { position: absolute; left: -9999px; }
.skip:focus { position: static; display: block; padding: .75rem 1rem; background: var(--wit); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Basis: tekst 18 px, regelafstand 1,6, regels tot 70 tekens (design.md, "Letter") ---- */
html { font-size: 100%; }  /* de bezoeker bepaalt de basis; alles in rem (WCAG 1.4.4) */
body {
  margin: 0; font-family: var(--letter-tekst); font-size: 1.125rem; line-height: 1.6;
  color: var(--navy); background: var(--wit);
  overflow-x: clip;  /* de vlakken lopen tot de rand van het scherm, zonder opzij te scrollen (WCAG 1.4.10) */
}
h1, h2, h3 { font-family: var(--letter-kop); line-height: 1.15; margin: 0 0 1rem; text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(2rem, 1.1rem + 3.6vw, 4rem); letter-spacing: -.015em; line-height: 1.05; }
/* lange woorden ("verzekeringsadviseur") breken op een smal scherm af in plaats van uit beeld te lopen (WCAG 1.4.10) */
h1, h2 { hyphens: auto; overflow-wrap: break-word; }
.opening > *, .stappen-blok > *, .contact-pagina > * { min-width: 0; }  /* een rasteritem krimpt mee, ook met een lang woord */
h2 { font-weight: 800; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); letter-spacing: -.01em; }
/* Twee gewichten zoals in het logo (B-18): zwaar als "Timmermans", licht als "Verzekeringen". De lichte regel is
   iets donkerder dan het grijs van het logo (B-31, voorstel): #878787 haalde op --vlak 3,3:1, genoeg voor grote tekst
   maar niet voor dunne letters op een telefoon (32 px, gewicht 300). --grijs-kop haalt 4,5:1 op wit en op --vlak
   (WCAG 1.4.3 voor gewone tekst), dus de regel is veilig op elke maat. */
.kop-twee .kop__zwaar, .kop-twee .kop__licht { display: block; }
.kop-twee .kop__licht { font-weight: 300; color: var(--grijs-kop); }
h3 { font-weight: 700; font-size: clamp(1.3125rem, 1.2rem + .5vw, 1.5rem); }
p { margin: 0 0 1rem; }
p, li, dd { max-width: 70ch; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 3px; }
img { max-width: 100%; height: auto; }
main { display: block; max-width: 72rem; margin: 0 auto; padding: 0 1rem 3rem; }
main > section { margin-block: 3rem; }
@media (min-width: 56rem) { main > section { margin-block: 6rem; } main { padding-bottom: 0; } }
.klein { font-size: 1rem; }
.intro { font-size: 1.25rem; }

/* Focus in twee kleuren: zichtbaar op wit en op navy (W3C-techniek C40; design.md, "Bediening"). */
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; box-shadow: 0 0 0 2px var(--wit); }
.voet :focus-visible { outline-color: var(--wit); box-shadow: 0 0 0 2px var(--navy); }

/* ---- Knoppen: minstens 44 px hoog (WCAG 2.5.5); primair vol navy, secundair met rand. Geen accentkleur. ---- */
.knop {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem 1.25rem; box-sizing: border-box;
  font-family: var(--letter-kop); font-weight: 700; font-size: 1.125rem; line-height: 1.2;
  color: var(--wit); background: var(--navy); border: 2px solid var(--navy); border-radius: .25rem; text-decoration: none; white-space: nowrap;
}
.knop { transition: background-color var(--snel) ease, border-color var(--snel) ease, translate var(--snel) ease; }
.knop:hover { background: var(--navy-licht); border-color: var(--navy-licht); }
.knop:active { translate: 0 1px; }
.knop--lijn { color: var(--navy); background: var(--wit); }
.knop--lijn:hover { background: var(--vlak); border-color: var(--navy); }
.knop--wit { color: var(--navy); background: var(--wit); border-color: var(--wit); }
.knop--wit:hover { background: var(--vlak); border-color: var(--vlak); }
.knop--lijn-wit { color: var(--wit); background: transparent; border-color: var(--wit); }
.knop--lijn-wit:hover { background: var(--navy-licht); border-color: var(--wit); }
.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* ---- Proef: wat nog open staat, zichtbaar (alleen zolang site.json proef: true) ---- */
.proef { max-width: none; margin: 0; padding: .5rem 1rem; font-size: 1rem; text-align: center; background: var(--vlak); border-bottom: 2px dashed var(--grijs); }
.proef-open { padding: .5rem .75rem; font-size: 1rem; color: var(--grijs-tekst); border: 2px dashed var(--grijs); border-radius: .25rem; }

/* ---- Kop (B-19, B-28): drie lagen (docs/structuur.md, "Menu"; WCAG 3.2.6).
   1. een navy hulpbalk: bellen, openingstijden, contact (NN/g, Utility Navigation);
   2. logo en de ene knop die telt: schade melden;
   3. het hoofdmenu: op een groot scherm tabs in dezelfde rij, met een balk op de onderrand; tot 72rem achter de knop
      "Menu", die rechts in de hulpbalk staat. ---- */
.icoon { display: inline-block; flex: none; width: 1.25rem; height: 1.25rem; stroke-width: 2; }

.hulpbalk { color: var(--wit); background: var(--navy); font-size: 1rem; }
.hulpbalk__binnen { max-width: 72rem; margin: 0 auto; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hulpbalk__open { display: none; margin: 0; color: var(--grijs-licht); }
.hulp { display: flex; align-items: center; gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; }
.hulp__contact { display: none; }  /* telefoon: Contact staat in het uitgeklapte menu, de knop "Menu" staat hier rechts */
.hulp a {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--wit); font-weight: 600; text-decoration: none; white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - .5rem) / 0 2px no-repeat;
  transition: background-size var(--gewoon) var(--zacht);
}
.hulp a:hover, .hulp a[aria-current] { background-size: 100% 2px; }
.hulpbalk :focus-visible { outline-color: var(--wit); box-shadow: 0 0 0 2px var(--navy); }
@media (min-width: 48rem) {
  .hulpbalk__open { display: block; }
  .hulp__contact { display: block; }
}
/* ruimte voor de knop "Menu", die rechts in deze balk staat */
@media (min-width: 48rem) and (max-width: 71.99rem) { .hulpbalk__binnen { padding-right: 7.25rem; } }

/* Een eigen laag boven de inhoud: het vlak van de opening begint achter het kruimelpad en schoof anders over de
   onderrand van de kop (de ruimte onder het menu viel weg). */
.kop { position: relative; z-index: 2; background: var(--wit); border-bottom: 1px solid var(--grijs-licht); }
.kop__binnen { position: relative; max-width: 72rem; margin: 0 auto; padding: .75rem 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
.kop__merk { display: inline-block; }
.kop__merk img { display: block; width: 10rem; }  /* nooit smaller dan 160 px (design.md, "Het logo") */
.kop__schade { order: 2; }
/* Smalle telefoons: de knop iets kleiner, zodat logo en knop vanaf 360 px op één rij blijven; in de hulpbalk het
   vergrootglas dichter bij het nummer, weg van de knop "Menu". */
@media (max-width: 24.49rem) { .kop__schade { padding-inline: .75rem; font-size: 1rem; } .hulpbalk .hulp { gap: 0 .5rem; } }
/* Het menu (B-28). Tot 72rem achter een knop met het woord "Menu" (NN/g: een pictogram heeft een tekstlabel nodig). De
   knop staat rechts in de hulpbalk, recht boven deze rij, zodat logo en "Schade melden" hun plek houden. Het menu klapt
   onder de kop open, over de pagina heen, één onderdeel per regel. Dicht in de CSS, zodat er bij het laden niets
   verspringt; zonder JavaScript staat het open (css/zonder-js.css). */
.menu { order: 1; margin-left: -1rem; }  /* neemt in deze rij geen plaats in: de marge heft de tussenruimte op */
.menu__knop {
  position: absolute; right: 1rem; bottom: 100%; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0;
  font: inherit; font-weight: 600; font-size: 1rem; color: var(--wit); border: 0; cursor: pointer;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - .5rem) / 0 2px no-repeat;
  transition: background-size var(--gewoon) var(--zacht);
}
.menu__knop:hover, .menu__knop[aria-expanded="true"] { background-size: 100% 2px; }
.menu__knop:focus-visible { outline-color: var(--wit); box-shadow: 0 0 0 2px var(--navy); }
.menu__knop[aria-expanded="false"] .menu__dicht, .menu__knop[aria-expanded="true"] .menu__open { display: none; }
.menu ul {
  position: absolute; z-index: 1; inset: 100% 0 auto; display: grid; margin: 0; padding: .25rem 1rem 1rem; list-style: none;
  background: var(--wit); border-bottom: 1px solid var(--grijs-licht); box-shadow: var(--schaduw);
}
.menu:not([data-open]) ul { display: none; }
.menu li { max-width: none; border-top: 1px solid var(--grijs-licht); }
.menu li:first-child { border-top: 0; }
.menu a {
  position: relative; display: flex; align-items: center; min-height: 3rem; box-sizing: border-box;
  font-family: var(--letter-kop); font-weight: 700; font-size: 1.125rem; text-decoration: none; white-space: nowrap;
}
.menu a::after {
  content: ""; position: absolute; left: 0; bottom: .35rem; width: 2.5rem; height: 3px; background: var(--navy);
  transform: scaleX(0); transform-origin: left; transition: transform var(--gewoon) var(--zacht);
}
.menu a:hover::after, .menu a[aria-current]::after { transform: scaleX(1); }
@media (min-width: 36rem) { .kop__merk img { width: 12rem; } }
@media (min-width: 48rem) { .menu__extra { display: none; } }
/* Groot scherm: logo, menu en knop op één rij; het menu als tabs, met een balk vlak onder het woord. */
@media (min-width: 72rem) {
  .kop__binnen { flex-wrap: nowrap; padding-block: 0; }
  .kop__merk img { width: 11.5rem; }
  .menu { align-self: stretch; margin: 0 auto 0 0; }
  .menu__knop { display: none; }
  .menu ul, .menu:not([data-open]) ul { position: static; display: flex; height: 100%; gap: 0 .25rem; padding: 0; background: none; border: 0; box-shadow: none; }
  .menu li { border: 0; }
  .menu a { justify-content: center; height: 100%; min-height: 4.75rem; padding: 0 .75rem; font-size: 1.0625rem; }
  .menu a::after { left: .75rem; right: .75rem; bottom: calc(50% - 1.3rem); width: auto; }
  .kop__schade { order: 2; }
}

/* ---- Snelbalk (B-15, B-19): een smalle balk die terugkomt als de bezoeker omhoog scrolt (js/kop.js). Vast (fixed),
   dus buiten de opbouw van de pagina: niets verspringt. Klein voor een goede verhouding inhoud/balk (NN/g),
   ondoorzichtig wit met een lijn en schaduw. Telefoon: twee even grote knoppen binnen bereik van de duim. Alleen als
   het scherm hoog genoeg is: bij grote tekst of zoom zou hij te veel afdekken. ---- */
html { scroll-padding-top: 5rem; }  /* focus en ankers nooit onder de balk (WCAG 2.4.11, techniek C43) */
.snelbalk {
  position: fixed; z-index: 10; inset: 0 0 auto; background: var(--wit); border-bottom: 1px solid var(--grijs-licht); box-shadow: var(--schaduw);
  translate: 0 -110%; visibility: hidden; transition: translate 300ms var(--zacht), visibility 0s 300ms;
}
.snelbalk[data-toon] { translate: 0 0; visibility: visible; transition: translate 300ms var(--zacht); }
@media (max-height: 29.99rem) { .snelbalk { display: none; } }
.snelbalk__binnen { max-width: 72rem; margin: 0 auto; padding: .5rem 1rem; display: flex; align-items: center; gap: .5rem; }
.snelbalk__binnen > .knop { flex: 1; justify-content: center; gap: .5rem; }
.snelbalk__binnen > .snelbalk__tel { flex: none; }
/* Telefoon: drie onderdelen op één rij, dus iets minder lucht in de knoppen; op de smalste alleen het pictogram van
   bellen ("Bel" blijft voor schermlezers). */
@media (max-width: 47.99rem) { .snelbalk__binnen > .knop { padding-inline: .9rem; } }
@media (max-width: 24.49rem) { .snelbalk__binnen > .knop { padding-inline: .75rem; font-size: 1rem; } }
@media (max-width: 22.49rem) {
  .snelbalk__bel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .snelbalk__binnen > .snelbalk__tel { min-width: 2.75rem; padding-inline: 0; }
}
/* Dezelfde knop "Menu" als in de kop (B-28), rechts in de balk; de lijst klapt onder de balk open. */
.snelbalk .menu__knop { position: static; order: 3; flex: none; padding-left: .25rem; color: var(--navy); }
.snelbalk .menu__knop:focus-visible { outline-color: var(--navy); box-shadow: 0 0 0 2px var(--wit); }
@media (max-width: 71.99rem) {
  .snelbalk[data-open] .snelbalk__menu {
    position: absolute; inset: 100% 0 auto; display: grid; margin: 0; padding: .25rem 1rem 1rem; list-style: none;
    background: var(--wit); border-bottom: 1px solid var(--grijs-licht); box-shadow: var(--schaduw);
  }
  .snelbalk__menu li { max-width: none; border-top: 1px solid var(--grijs-licht); }
  .snelbalk__menu li:first-child { border-top: 0; }
  .snelbalk__menu a {
    position: relative; display: flex; align-items: center; min-height: 3rem; box-sizing: border-box;
    font-family: var(--letter-kop); font-weight: 700; font-size: 1.125rem; text-decoration: none; white-space: nowrap;
  }
  .snelbalk__menu a::after {
    content: ""; position: absolute; left: 0; bottom: .35rem; width: 2.5rem; height: 3px; background: var(--navy);
    transform: scaleX(0); transform-origin: left; transition: transform var(--gewoon) var(--zacht);
  }
  .snelbalk__menu a:hover::after, .snelbalk__menu a[aria-current]::after { transform: scaleX(1); }
}
.snelbalk__merk, .snelbalk__menu, .snelbalk__nummer { display: none; }
.snelbalk__merk { flex: none; }
.snelbalk__merk img { display: block; width: 10rem; }  /* de kleinste breedte van het logo (design.md) */
@media (min-width: 48rem) {
  .snelbalk__binnen { gap: 1rem; }
  .snelbalk__merk { display: block; margin-right: auto; }
  .snelbalk__binnen > .knop { flex: none; }
  .snelbalk__nummer { display: inline; }
}
@media (min-width: 72rem) {
  .snelbalk .menu__knop { display: none; }
  .snelbalk__merk { margin-right: 0; }
  .snelbalk__menu { display: flex; gap: 0; margin: 0 auto 0 0; padding: 0; list-style: none; }
  /* het nummer als gewone link met pictogram, zodat alles op één rij past; "Bel" blijft voor schermlezers */
  .snelbalk__tel { padding: 0 .25rem; border: 0; background: none; font-family: var(--letter-tekst); font-weight: 600; }
  .snelbalk__tel:hover { background: none; text-decoration: underline; }
  .snelbalk__bel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .snelbalk__nummer { white-space: nowrap; }
  .snelbalk__menu a {
    position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .6rem;
    font-family: var(--letter-kop); font-weight: 700; text-decoration: none; white-space: nowrap;
  }
  .snelbalk__menu a::after {
    content: ""; position: absolute; left: .6rem; right: .6rem; bottom: .25rem; height: 3px; background: var(--navy);
    transform: scaleX(0); transform-origin: left; transition: transform var(--gewoon) var(--zacht);
  }
  .snelbalk__menu a:hover::after, .snelbalk__menu a[aria-current]::after { transform: scaleX(1); }
}

/* ---- Opening ---- */
/* Een licht vlak over de hele breedte, met een schuine onderrand zoals de balk in de illustraties. Het beeld steekt
   eroverheen naar beneden (B-14, voorstel). */
.opening { position: relative; isolation: isolate; display: grid; gap: 1.5rem; align-items: center; margin-top: 0; padding: 2rem 0 calc(var(--schuin) + 1rem); }
.opening::before {
  content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: var(--vlak);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schuin)), 0 100%);
}
.kruimels + .opening { padding-top: 1rem; }
.kruimels + .opening::before { top: -4.75rem; }  /* het vlak begint achter het kruimelpad */
.kruimels { position: relative; z-index: 1; }
/* Homepage: het vlak loopt door tot halverwege de taken, zodat de tegels over de schuine rand liggen. */
.opening--home::before { bottom: -9rem; }
main > .opening--home { margin-bottom: 0; }  /* anders valt de marge van 96 px samen met die van de taken */
.opening--home + .taken { position: relative; z-index: 1; margin-top: 1.5rem; }
@media (min-width: 48rem) { .opening--home::before { bottom: -9.5rem; } }
.opening__beeld img { display: block; width: 100%; max-width: 28rem; margin-inline: auto; }
@media (min-width: 56rem) {
  .opening { grid-template-columns: 1fr 28rem; gap: 3rem; padding-top: 4rem; padding-bottom: var(--schuin); }
  .opening__beeld { margin-bottom: calc(var(--schuin) * -1.25); }  /* het beeld steekt over de schuine rand */
}

/* ---- De opening van de homepage (B-23, B-27, B-35): de foto over de volle breedte, de tekst in wit eroverheen. Sinds
   B-35 ligt er over de hele foto navy met een licht verloop (zie .held__foto::after): de tekst is overal leesbaar.
   Op een breed scherm groeit de opening mee in hoogte (tot 38rem), zodat de foto niet zo ver inzoomt. Geen overlap
   met de taken: de navy tegel "Schade melden" zou op navy wegvallen. ---- */
.held { color: var(--wit); padding-block: 3rem calc(var(--schuin) + 3rem); }
.held::before { display: none; }
main > .held { margin-bottom: 3rem; }
.held + .taken { margin-top: 0; }
.held__foto { position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schuin)), 0 100%); background: var(--navy); }
.held__foto > * { width: 100%; height: 100%; box-sizing: border-box; object-fit: cover; }
/* B-35: over de hele foto navy, met een licht verloop naar --navy-licht; nergens open. */
.held__foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgb(30 43 80 / .93) 0%, rgb(30 43 80 / .9) 45%, rgb(44 60 102 / .86) 100%);
}
.held .opening__tekst { max-width: 50rem; }
.held h1 { font-size: clamp(1.75rem, .9rem + 3.6vw, 4rem); }  /* "verzekeringsadviseur" heel, ook op 320 px */
.held .kop__licht { color: var(--grijs-licht); }
.held .intro { max-width: 40rem; }
.held :focus-visible { outline-color: var(--wit); box-shadow: 0 0 0 2px var(--navy); }
@media (min-width: 56rem) {
  .held { grid-template-columns: 1fr; min-height: clamp(30rem, 32vw, 38rem); padding-block: 5rem calc(var(--schuin) + 4rem); }
}
/* De plek voor de foto, donker: gestreept navy, het onderschrift rechtsonder waar het verloop licht is. */
.held__foto .fotoplek--held {
  aspect-ratio: auto; place-content: end; justify-items: end; padding: 2rem 2rem calc(var(--schuin) + 1.5rem); border: 0; border-radius: 0;
  color: var(--wit); background: repeating-linear-gradient(135deg, #24335c 0 14px, var(--navy) 14px 28px);
}
.held__foto .fotoplek--held figcaption { position: relative; z-index: 1; max-width: 22rem; text-align: right; }
.held__foto .fotoplek--held .icoon { position: relative; z-index: 1; }
@media (max-width: 55.99rem) { .held__foto .fotoplek--held { display: none; } }  /* telefoon: het verloop is daar bijna dicht */

/* ---- Tekstblokken (B-23): op een groot scherm de kop links en de tekst rechts, als in een jaarverslag. De kop blijft
   staan terwijl u leest (sticky), met een korte navy streep erboven. Een dunne lijn scheidt de blokken, zodat ze
   dichter op elkaar kunnen dan losse secties. ---- */
.tekstblok h2::before { content: ""; display: block; width: 3rem; height: 4px; margin-bottom: .875rem; background: var(--navy); }
@media (min-width: 56rem) {
  .tekstblok { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 4rem; align-items: start; }
  .tekstblok > * { grid-column: 2; }
  .tekstblok > h2 { grid-column: 1; grid-row: 1 / span 30; position: sticky; top: 5.5rem; font-size: 1.75rem; }
  .tekstblok > .blok__tekst { display: contents; }
  .tekstblok > .blok__tekst > * { grid-column: 2; }
  .tekstblok > .blok__tekst > h2 { grid-column: 1; grid-row: 1 / span 30; position: sticky; top: 5.5rem; font-size: 1.75rem; }
  main > .tekstblok + .tekstblok:not(.band) { margin-top: 0; padding-top: 3rem; border-top: 1px solid var(--grijs-licht); }
  main > .tekstblok:not(.band) + .tekstblok:not(.band) { margin-top: 3rem; }
  main > .tekstblok:not(.band):has(+ .tekstblok:not(.band)) { margin-bottom: 3rem; }  /* anders valt 6rem samen met 3rem */
}
/* Een lijst met vinkjes: wat het kantoor doet, zwaarder dan een gewone opsomming. */
.lijst--vink { padding-left: 0; list-style: none; }
.lijst--vink li { position: relative; padding-left: 2rem; }
.lijst--vink li::before {
  content: ""; position: absolute; left: .25rem; top: .35em; width: .45rem; height: .8rem;
  border: solid var(--navy); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
/* De samenvatting van een wettelijke tekst: groter, op het lichte vlak. */
.samenvatting { padding: 1.75rem; background: var(--vlak); border-left: 4px solid var(--navy); border-radius: 0 .5rem .5rem 0; }
.samenvatting p { font-size: 1.1875rem; }
.samenvatting p:last-child { margin-bottom: 0; }

/* ---- Vormen van een blok (B-24): de vorm volgt de inhoud ---- */
/* let op: een vlak met een uitroepteken */
.letop { position: relative; padding: 1.5rem 1.5rem 1.5rem 4rem; background: var(--vlak); border-left: 4px solid var(--navy); border-radius: 0 .5rem .5rem 0; }
.letop__icoon { position: absolute; left: 1.25rem; top: 1.6rem; width: 1.75rem; height: 1.75rem; color: var(--navy); }
.letop h2 { font-size: 1.375rem; }
.letop .blok__tekst > :last-child { margin-bottom: 0; }
/* uitspraak: één zin groot en licht */
.uitspraak h2 { font-size: 1.125rem; font-weight: 700; letter-spacing: .02em; }
.uitspraak__zin { max-width: 24ch; margin-bottom: 1.5rem; font-family: var(--letter-kop); font-weight: 300; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); line-height: 1.15; letter-spacing: -.01em; }
.band--navy { color: var(--wit); }
.band.band--navy::before { background: var(--navy); }
.band--navy a { color: var(--wit); }
.band--navy :focus-visible { outline-color: var(--wit); box-shadow: 0 0 0 2px var(--navy); }
/* zigzag: foto en tekstvlak half over elkaar, zoals Interpolis en Univé */
.zigzag { display: grid; gap: 1.5rem; }
.zigzag .blok__tekst { position: relative; padding: 1.75rem; background: var(--wit); border-radius: .5rem; box-shadow: var(--schaduw-hoog); }
@media (min-width: 56rem) {
  .zigzag { grid-template-columns: repeat(12, 1fr); align-items: center; gap: 1.5rem 0; }
  .zigzag__foto { grid-column: 1 / span 8; grid-row: 1; }
  .zigzag .blok__tekst { grid-column: 7 / -1; grid-row: 1; padding: 2.5rem; }
  .zigzag .portretten { grid-column: 1 / -1; }
}
/* kaarten met een pictogram */
.lijst-blokken--icoon .icoon { width: 2rem; height: 2rem; margin-bottom: .75rem; color: var(--navy); stroke-width: 1.5; }
.lijst-blokken--icoon p { margin: 0; }
/* voorbeelden: losse kaartjes */
.voorbeelden { display: grid; gap: .75rem; padding: 0; list-style: none; }
@media (min-width: 40rem) { .voorbeelden { grid-template-columns: repeat(2, 1fr); } }
.lijst.voorbeelden li + li { margin-top: 0; }
.voorbeelden li { max-width: none; padding: 1rem 1.25rem 1rem 3rem; position: relative; background: var(--vlak); border-radius: .5rem; }
.voorbeelden li::before { content: "\201C"; position: absolute; left: 1rem; top: .35rem; font-family: var(--letter-kop); font-weight: 800; font-size: 2rem; color: var(--navy); }
/* stappen: de tijdlijn van schade melden, met een zin per stap */
.stappen.stappen--kort { margin-bottom: 1.5rem; }
.stappen--kort li::before { grid-row: auto; }
.stappen--kort p { align-self: center; margin: 0; }
/* uitklapblokken (privacy) */
.uitklappen { margin-top: 2.5rem; border-bottom: 1px solid var(--grijs-licht); }
.uitklap { border-top: 1px solid var(--grijs-licht); }
.uitklap summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.75rem; padding: 1rem 0; cursor: pointer; list-style: none; }
.uitklap summary::-webkit-details-marker { display: none; }
.uitklap summary h2 { margin: 0; font-size: 1.375rem; }
.uitklap summary::after { content: "+"; flex: none; font-family: var(--letter-kop); font-size: 2rem; line-height: 1; color: var(--navy); transition: rotate var(--gewoon) var(--zacht); }
.uitklap[open] summary::after { rotate: 45deg; }
.uitklap summary:hover h2 { text-decoration: underline; text-underline-offset: .2em; }
.uitklap > p:last-child { margin-bottom: 1.5rem; }

/* ---- Zoeken (B-25): los onderdeel, dit hele stuk mag weg als het onderdeel weg is ---- */
.hulp__zoek .icoon { width: 1.25rem; height: 1.25rem; }
@media (max-width: 35.99rem) {  /* telefoon: alleen het vergrootglas, het woord blijft voor schermlezers */
  .hulp__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hulp__zoek { justify-content: center; min-width: 2.75rem; }
}
.zoekvak { max-width: 40rem; margin-bottom: 1rem; }
/* Het zoekvak staat hidden tot js/zoeken.js het toont. Komt het script na het eerste beeld (een trage telefoon), dan
   schoof de lijst eronder omlaag (Lighthouse mat één keer CLS 0,098). Staat JavaScript aan, dan houdt het vak zijn
   plek al vrij, onzichtbaar; zonder JavaScript blijft het weg (B-32). */
@media (scripting: enabled) { .zoekvak[hidden] { display: block; visibility: hidden; } }
.zoekvak label { display: block; margin-bottom: .5rem; font-family: var(--letter-kop); font-weight: 700; font-size: 1.25rem; }
.zoekvak__veld { position: relative; }
.zoekvak__veld .icoon { position: absolute; left: 1rem; top: 50%; translate: 0 -50%; width: 1.5rem; height: 1.5rem; color: var(--grijs-tekst); pointer-events: none; }
.zoekvak input { width: 100%; box-sizing: border-box; min-height: 3.5rem; padding: .75rem 1rem .75rem 3.25rem; font: inherit; font-size: 1.25rem; border: 2px solid var(--navy); border-radius: .5rem; }
.zoekvak__hint { margin: .5rem 0 0; font-size: 1rem; color: var(--grijs-tekst); }
.zoek-status { min-height: 1.5rem; font-size: 1rem; color: var(--grijs-tekst); }
.zoek-niets { max-width: 44rem; }
.zoek-lijst { margin: 0; padding: 0; list-style: none; }
.zoek-lijst li { max-width: none; padding: .875rem 0; border-bottom: 1px solid var(--grijs-licht); }
.zoek-lijst a { font-family: var(--letter-kop); font-weight: 700; }
.zoek-lijst__tekst { display: block; margin-top: .125rem; font-size: 1rem; color: var(--grijs-tekst); }
.zoek-lijst__groep { display: none; }
.zoek-uitkomst { max-width: 44rem; }
.zoek-uitkomst .zoek-lijst__groep { display: inline-block; margin-left: .5rem; padding: 0 .5rem; font-size: .875rem; color: var(--grijs-tekst); background: var(--vlak); border-radius: 1rem; }
.zoek-alles { margin-top: 2rem; }
.zoek-groepen { display: grid; gap: 2rem 3rem; }
@media (min-width: 48rem) { .zoek-groepen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .zoek-groepen { grid-template-columns: repeat(3, 1fr); } }
.zoek-groepen h3 { padding-bottom: .5rem; border-bottom: 3px solid var(--navy); }

/* ---- Kerngegevens (over ons): groot en zwaar het feit, licht de betekenis ---- */
.feiten dl { display: grid; gap: 1.5rem; margin: 0; }
@media (min-width: 48rem) { .feiten dl { grid-template-columns: repeat(3, 1fr); } }
.feiten div { display: flex; flex-direction: column-reverse; padding-top: 1rem; border-top: 4px solid var(--navy); }
.feiten dd { margin: 0; font-family: var(--letter-kop); font-weight: 800; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.1; letter-spacing: -.015em; }
.feiten dt { margin-top: .25rem; font-weight: 300; font-size: 1.125rem; color: var(--grijs-tekst); }

/* ---- Banden over de hele breedte, met de schuine rand bovenaan (B-18) ---- */
.band { position: relative; isolation: isolate; padding-block: calc(var(--schuin) + 2rem) 3rem; }
.band::before {
  content: ""; position: absolute; z-index: -2; inset: 0 calc(50% - 50vw); background: var(--vlak);
  clip-path: polygon(0 var(--schuin), 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 56rem) { .band { padding-block: calc(var(--schuin) + 4rem) 5rem; } }
/* Eindigt de pagina met een band, dan ligt de voet er direct tegenaan (B-32): het vlak loopt door achter de schuine
   rand van de voet. Anders stond er een witte wig tussen het lichte vlak en het navy. */
main:has(> .band:last-child) { padding-bottom: 0; }
main > .band:last-child { margin-bottom: 0; }
main > .band:last-child::before { bottom: calc(var(--schuin) * -1); }
main:has(> .band:last-child) + .voet { margin-top: 0; }


/* ---- Onderwerpen als kaarten ---- */
.kaarten { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 36rem) { .kaarten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .kaarten { grid-template-columns: repeat(3, 1fr); } }
/* Wat je kunt aanklikken, ligt op de pagina: wit met een lichte schaduw, en komt bij hover iets naar je toe (B-14). */
.kaart, .tegel {
  box-shadow: var(--schaduw);
  transition: transform var(--gewoon) var(--zacht), box-shadow var(--gewoon) var(--zacht);
}
.kaart--link:hover, .tegel:hover { transform: translateY(-3px); box-shadow: var(--schaduw-hoog); }
.kaart { max-width: none; position: relative; display: flex; flex-direction: column; padding: 1.5rem 0 .75rem; background: var(--wit); border-radius: .5rem; overflow: clip; }
.kaart > :not(.illustratie, .beeldkader) { margin-inline: 1.25rem; }
/* De hoofden van de figuren raken bijna de bovenrand van het beeld: ruimte erboven (padding-top), zodat niets tegen
   de rand van de kaart ligt. De zoom bij hover groeit vanaf de grond en valt in die ruimte (3% van het beeld < 1.5rem). */
/* De illustraties zijn niet precies even hoog (960 x 729 tot 765): één vaste verhouding, het beeld op de grond, zodat
   de koppen van de kaarten naast elkaar op één lijn staan (B-32). */
.kaart .illustratie {
  display: block; width: 100%; margin-bottom: 1rem; aspect-ratio: 960 / 765; object-fit: contain; object-position: 50% 100%;
  transform-origin: 50% 100%; transition: transform var(--gewoon) var(--zacht);
}
/* Vijf doelgroepen, even zwaar (B-18, na feedback van de eigenaar): 3 + 2 met de onderste twee in het midden, zodat
   er geen gat of lege kaart is en geen groep voorgaat. Telefoon: onder elkaar; daartussen 2 + 2 + 1 in het midden. */
@media (min-width: 36rem) {
  .kaarten--bento { grid-template-columns: repeat(4, 1fr); }
  .kaarten--bento > * { grid-column: span 2; }
  .kaarten--bento > :last-child:nth-child(odd) { grid-column: 2 / span 2; }
}
@media (min-width: 56rem) {
  .kaarten--bento { grid-template-columns: repeat(6, 1fr); }
  .kaarten--bento > :last-child:nth-child(odd) { grid-column: span 2; }
  .kaarten--bento > :nth-child(4) { grid-column: 2 / span 2; }
}
.kaart--link:hover .illustratie { transform: scale(1.03); }
/* Nog geen illustratie: het kader van de illustraties (navy balk boven, schuine balk onder), zodat de rij klopt. */
.beeldkader {
  position: relative; display: grid; place-items: center; aspect-ratio: 960 / 760; margin-bottom: 1rem; font-size: 1rem; color: var(--grijs-tekst);
  background: linear-gradient(var(--navy), var(--navy)) 0 4% / 100% 9% no-repeat, var(--vlak);
}
.beeldkader::after { content: ""; position: absolute; inset: auto 0 8%; height: 18%; background: var(--navy); clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%); }
.kaart h3 { margin-bottom: .5rem; }
.kaart--link h3 a::after { content: ""; position: absolute; inset: 0; }  /* de hele kaart klikbaar, één link */
.kaart .proef-open { margin-top: auto; }
/* Telefoon (B-30): de vijf doelgroepen als lage regels, het beeld links en de tekst rechts. Samen ruim één scherm in
   plaats van bijna drie, zodat Paarden en Oldtimers niet pas na lang scrollen in beeld komen. Zelfde kaart en zelfde
   beeld; de hele kaart blijft één link. */
@media (max-width: 35.99rem) {
  .kaarten--bento { gap: .75rem; }
  .kaarten--bento .kaart { display: grid; grid-template-columns: 7.5rem 1fr; column-gap: 1rem; padding: .75rem 1rem .75rem 0; }
  .kaarten--bento .kaart > :not(.illustratie, .beeldkader) { margin-inline: 0; }
  .kaarten--bento .kaart .illustratie { grid-row: 1 / span 2; align-self: center; margin-bottom: 0; }
  .kaarten--bento .kaart h3 { align-self: end; margin-bottom: .25rem; }
  .kaarten--bento .kaart p { align-self: start; margin: 0; font-size: 1rem; line-height: 1.5; }
}

/* ---- Taken op de homepage: de top tasks als tegels; schade melden in navy ---- */
.tegels { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .tegels { grid-template-columns: repeat(3, 1fr); } }
.tegel { position: relative; padding: 1.25rem 1.5rem; background: var(--wit); border: 1px solid var(--grijs-licht); border-radius: .5rem; }
.tegel h3 { margin-bottom: .5rem; }
.tegel h3 a { text-decoration: none; }
.tegel h3 a::after { content: ""; position: absolute; inset: 0; }  /* de hele tegel klikbaar, één link */
.tegel p { margin: 0; }
.tegel--sterk { color: var(--wit); background: var(--navy); border-color: var(--navy); }
.tegel--sterk a { color: var(--wit); }
.tegel:focus-within { outline: 3px solid var(--navy); outline-offset: 2px; }
.tegel h3 a:focus-visible { outline: none; box-shadow: none; }

/* ---- Verzekeringen per doelgroep ---- */
.lijst-intro { color: var(--grijs-tekst); }
.producten { display: grid; gap: 0 2.5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .producten { grid-template-columns: repeat(2, 1fr); } }
.product { position: relative; display: grid; grid-template-columns: 2.75rem 1fr; gap: 1.25rem; align-items: start; padding: 1.25rem 0; border-top: 1px solid var(--grijs-licht); }
.product :is(h3, h4) { font-family: var(--letter-kop); font-weight: 700; font-size: 1.3125rem; line-height: 1.15; margin: .25rem 0 .35rem; }
.product p { margin: 0; }
/* Een verzekering met een eigen pagina: de hele regel is klikbaar, met "Lees meer" (B-18). */
.product--link :is(h3, h4) a::after { content: ""; position: absolute; inset: 0; }
.product__meer { margin-top: .5rem !important; font-family: var(--letter-kop); font-weight: 700; font-size: 1rem; }
.product__meer::after { content: "→"; display: inline-block; margin-left: .4em; transition: translate var(--gewoon) var(--zacht); }
.product--link:hover .product__meer::after { translate: .25rem 0; }
/* Pictogram in een schild, de vorm uit het logo (B-16): hangt als een label rechtsboven tegen de rand van de kaart,
   zodat het geen hoogte kost. Herkenbaar bij het scannen en het hoort bij het merk; versiering naast een echte kop
   (aria-hidden). Bij hover wordt het label iets langer, alsof je eraan trekt. */
.schild {
  position: absolute; top: -1px; right: 1.25rem; box-sizing: border-box; width: 2.75rem; height: 3.25rem; padding: .5rem .55rem .95rem;
  color: var(--wit); background: var(--navy); stroke-width: 1.5;
  clip-path: polygon(0 0, 100% 0, 100% 52%, 94% 70%, 80% 85%, 50% 100%, 20% 85%, 6% 70%, 0 52%);
  transition: background-color var(--gewoon) var(--zacht);
}
.tegel:hover .schild { background: var(--navy-licht); }
.tegel--sterk:hover .schild { background: var(--vlak); }
.tegel--sterk .schild { color: var(--navy); background: var(--wit); }
.tegel h3 { padding-right: 3.25rem; }  /* de kop loopt niet onder het schild */
/* Los schild (B-18): precies de vorm van het schild in het logo, als masker; alleen in de lijsten met verzekeringen. */
.schild--los {
  position: static; clip-path: none; mask: url("/img/schild.svg") center / 100% 100% no-repeat;
  width: 2.75rem; height: 3.6rem; padding: .6rem .6rem 1.15rem;
}
.vinkje { display: inline-block; width: 1.75rem; height: 1.75rem; vertical-align: middle; color: var(--navy); stroke-width: 2.75; }
.product--link:hover .schild--los { background: var(--navy-licht); }
.rubriek + .rubriek { margin-top: 2rem; }
.rubriek__kop { font-size: 1.25rem; margin-bottom: .25rem; }

/* ---- Contact ---- */
.contact-blok { padding: 2rem 1.5rem; background: var(--vlak); border-radius: .5rem; }
.gegevens { display: grid; gap: 1rem; margin: 0; }
.gegevens div { display: grid; gap: .1rem; align-content: start; }  /* de regels blijven bij hun kopje, ook naast een hoger vak */
.gegevens dt { font-family: var(--letter-kop); font-weight: 700; }
.gegevens dd { margin: 0; }
@media (min-width: 40rem) { .gegevens { grid-template-columns: repeat(2, 1fr); } }
.contact-pagina { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .contact-pagina { grid-template-columns: 1fr 1fr; align-items: start; } }
.pagina-kop { margin-top: 2rem; }

/* ---- Kruimelpad ---- */
.kruimels ol { display: flex; flex-wrap: wrap; gap: .25rem; margin: 1rem 0 0; padding: 0; list-style: none; font-size: 1rem; }
.kruimels li + li::before { content: "›"; margin-right: .35rem; color: var(--grijs-tekst); }
.kruimels a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.kruimels [aria-current] { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ---- Keuzes: kaarten op een smal scherm, een tabel vanaf 48rem (zonder opzij scrollen, WCAG 1.4.10) ---- */
.keuzekaarten { display: grid; gap: 1rem; margin: 1.5rem 0 1rem; padding: 0; list-style: none; }
.keuzekaarten li { padding: 1.25rem; background: var(--vlak); border-radius: .5rem; }
.keuzekaarten dl { margin: 0; }
.keuzekaarten div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--grijs); }
.keuzekaarten div:last-child { grid-template-columns: 1fr; gap: .1rem; }
.keuzekaarten dt { font-size: 1rem; }
.keuzekaarten dd { margin: 0; font-size: 1rem; }
.keuzekaarten div.conclusie { margin-top: .5rem; padding-top: .75rem; border-top: 2px solid var(--navy); }
.keuzekaarten div.conclusie :is(dt, dd) { font-family: var(--letter-kop); font-weight: 700; }
.tabel { display: none; overflow-x: auto; margin: 1.5rem 0 1rem; }
@media (min-width: 48rem) { .tabel { display: block; } .keuzekaarten { display: none; } }
table { border-collapse: collapse; min-width: 40rem; width: 100%; font-size: 1rem; }
th, td { padding: .75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--grijs); }
thead th { font-family: var(--letter-kop); background: var(--vlak); }
tbody th { font-weight: 600; }
tbody tr { transition: background-color var(--snel); }
tbody tr:hover { background: var(--vlak); }
td.ja, td.nee { vertical-align: middle; }
/* nee: een streep in het grijs van het logo (3,59:1, genoeg voor een grafisch element, WCAG 1.4.11) */
.nee__streep { display: inline-block; width: 1.25rem; height: 3px; vertical-align: middle; background: var(--grijs); border-radius: 2px; }
tr.conclusie :is(th, td) { font-family: var(--letter-kop); font-weight: 700; background: var(--vlak); border-top: 2px solid var(--navy); border-bottom: 0; }
.noot { font-size: 1rem; color: var(--grijs-tekst); }

/* ---- Lijsten met blokken en stappen ---- */
.lijst-blokken { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
/* Twee naast elkaar. Bij een oneven aantal loopt de laatste over de volle breedte, zodat er geen gat naast staat; vijf
   kaarten staan op een groot scherm als drie boven en twee eronder (B-32). */
@media (min-width: 40rem) {
  .lijst-blokken { grid-template-columns: repeat(6, 1fr); }
  .lijst-blokken > * { grid-column: span 3; }
  .lijst-blokken > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 56rem) {
  .lijst-blokken > :first-child:nth-last-child(5), .lijst-blokken > :first-child:nth-last-child(5) ~ :nth-child(-n+3) { grid-column: span 2; }
  .lijst-blokken > :first-child:nth-last-child(5) ~ :nth-child(n+4) { grid-column: span 3; }
}
.lijst-blokken li { padding: 1.5rem; background: var(--vlak); border-radius: .5rem; }
/* ---- Plek voor een foto die nog komt (B-22): gestreept vlak met een camera en wat er komt ---- */
.fotoplek {
  display: grid; place-content: center; justify-items: center; gap: .5rem; aspect-ratio: 3 / 2; margin: 0; padding: 1rem;
  font-size: 1rem; color: var(--grijs-tekst); text-align: center; border: 2px dashed var(--grijs); border-radius: .5rem;
  background: repeating-linear-gradient(135deg, var(--vlak) 0 12px, var(--vlak-donker) 12px 24px);
}
.fotoplek--liggend { aspect-ratio: 16 / 9; }
.fotoplek--portret { aspect-ratio: 4 / 5; }
.fotoplek .icoon { width: 2rem; height: 2rem; stroke-width: 1.5; }
.fotoplek figcaption { max-width: 28ch; }
.met-foto { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 56rem) { .met-foto { grid-template-columns: 1fr 1fr; gap: 3rem; } }
/* ---- Het merkvlak (B-36): waar de foto van het team stond. Navy met de ronde hoek van de kaarten, het negatieve logo
   en onderin een schuine balk in --navy-licht, het vormmotief van de illustraties. Alleen naast tekst. ---- */
.merkvlak {
  position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; aspect-ratio: 3 / 2;
  background: var(--navy); border-radius: .5rem; box-shadow: var(--schaduw-hoog);
}
.merkvlak::after {
  content: ""; position: absolute; z-index: -1; inset: auto 0 0; height: 30%;
  background: var(--navy-licht); clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 100%);
}
.merkvlak img { display: block; width: 62%; height: auto; margin-bottom: 8%; }
/* In de zigzag ligt het tekstvlak over het rechter kwart: het logo links in het zichtbare deel. */
.zigzag__foto--merk .merkvlak { justify-items: start; padding-left: 9%; }
.zigzag__foto--merk .merkvlak img { width: 52%; }
@media (max-width: 55.99rem) { .met-foto > .merkvlak, .zigzag__foto--merk { display: none; } }
.fotoplek--liggend + .portretten, section > .fotoplek { margin-top: 1.5rem; }
.portretten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1rem 0 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .portretten { grid-template-columns: repeat(4, 1fr); } }
.portretten li { max-width: none; }
.contact-blok + .fotoplek, .contact-blok + .foto { margin-top: 1.5rem; }
/* Een echte foto (tools/foto.py): de hoeken van de kaarten, vaste maat uit width en height. */
.foto { margin: 0; }
.foto img { display: block; width: 100%; height: auto; border-radius: .5rem; }
.belkaart .fotoplek { margin-bottom: 1.25rem; background: repeating-linear-gradient(135deg, var(--wit) 0 12px, var(--vlak-donker) 12px 24px); }

/* ---- Productpagina (B-20): in het kort, lijsten, vaste premies, lees ook ---- */
/* Lange samengestelde titels (Arbeidsongeschiktheidsverzekering): een kleinere kop dan op de overzichten. */
.kruimels + .opening h1 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem); }
.kort dl { display: grid; gap: .75rem; margin: 0; }
@media (min-width: 48rem) { .kort dl { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.kort div { padding: 1rem 1.25rem; background: var(--wit); border-left: 4px solid var(--navy); border-radius: 0 .5rem .5rem 0; box-shadow: var(--schaduw); }
.kort dt { margin-bottom: .25rem; font-family: var(--letter-kop); font-weight: 700; }
.kort dd { margin: 0; }
.lijst { margin: 0 0 1rem; padding-left: 1.25rem; }
.lijst li + li { margin-top: .5rem; }
.lijst li::marker { color: var(--navy); }
.prijzen { max-width: 44rem; margin: 1rem 0; padding: 0; list-style: none; }
.prijzen li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1.5rem; max-width: none; padding: .875rem 0; border-bottom: 1px solid var(--grijs-licht); }
.prijzen__wat, .prijzen__bedrag { display: flex; flex-direction: column; }
/* Telefoon: het bedrag op een eigen regel, links onder de omschrijving. Vanaf 36rem staat het ernaast, rechts. */
@media (max-width: 35.99rem) { .prijzen:not(.prijzen--klein) .prijzen__bedrag { width: 100%; } }
@media (min-width: 36rem) { .prijzen__bedrag { text-align: right; } }
.prijzen__bedrag strong { font-family: var(--letter-kop); font-size: 1.25rem; }
:is(.prijzen__wat, .prijzen__bedrag) span { font-size: 1rem; color: var(--grijs-tekst); }
.prijzen--klein li { padding: .5rem 0; }
.ook { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .ook { grid-template-columns: repeat(2, 1fr); } .ook > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.ook li { max-width: none; padding: 1.25rem 1.5rem; border: 1px solid var(--grijs-licht); border-radius: .5rem; }
.ook a { font-family: var(--letter-kop); font-weight: 700; }
.ook span { display: block; margin-top: .25rem; font-size: 1rem; color: var(--grijs-tekst); }
.ook + p { margin-top: 1.5rem; }

.stappen { counter-reset: stap; display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.stappen li { position: relative; counter-increment: stap; display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; }
.stappen li:not(:last-child)::after {  /* een lijn die de stappen aan elkaar knoopt */
  content: ""; position: absolute; left: calc(1.5rem - 1px); top: 3.5rem; bottom: -1rem; width: 2px; background: var(--navy); transform-origin: top;
}
.stappen li::before {
  content: counter(stap); grid-row: span 2; display: grid; place-items: center; width: 3rem; height: 3rem;
  font-family: var(--letter-kop); font-weight: 800; font-size: 1.375rem; color: var(--wit); background: var(--navy); border-radius: 50%;
}
.stappen h3 { margin-bottom: .25rem; align-self: center; }
/* De belkaart naast de stappen blijft in beeld tijdens het lezen (B-18). */
.stappen-blok { display: grid; gap: 2.5rem; align-items: start; }
.belkaart { padding: 1.75rem; background: var(--vlak); border-radius: .5rem; }
.belkaart__kop { font-size: 1.5rem; margin-bottom: .5rem; }
.belkaart__tel { margin-bottom: .75rem; }
.belkaart__tel a { font-family: var(--letter-kop); font-weight: 800; font-size: 1.875rem; letter-spacing: -.01em; white-space: nowrap; }
.belkaart p:last-child { margin-bottom: 0; }
.belkaart a[href^="mailto"] { font-size: 1rem; overflow-wrap: anywhere; }  /* het lange mailadres past ook op 320 px */
@media (min-width: 56rem) {
  .stappen-blok { grid-template-columns: 1fr 22rem; gap: 4rem; }
  .belkaart { position: sticky; top: 5.5rem; margin-top: 4rem; }
}


/* ---- Voet: de navy afsluiting van elke pagina, met de schuine rand (B-18). Contact en
   schade groot; de juridische gegevens klein eronder. ---- */
.voet {
  position: relative; isolation: isolate; margin-top: 3rem; padding-top: var(--schuin); color: var(--wit); background: var(--navy);
  clip-path: polygon(0 var(--schuin), 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 56rem) { .voet { margin-top: 6rem; } }
.voet a:not(.knop) { color: var(--wit); }
.voet__binnen { max-width: 72rem; margin: 0 auto; padding: 3rem 1rem 2.5rem; display: grid; gap: 2.5rem; }
@media (min-width: 56rem) { .voet__binnen { grid-template-columns: 1.5fr 1fr; align-items: end; padding-top: 4rem; } }
.afsluiting .kop__licht { color: var(--grijs-licht); }  /* 8,98:1 op navy, zoals "Verzekeringen" in het negatieve logo */
.afsluiting h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
.afsluiting__tel { margin-bottom: 1rem; }
.afsluiting__tel a { font-family: var(--letter-kop); font-weight: 800; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); letter-spacing: -.01em; white-space: nowrap; }
.voet__gegevens { display: grid; gap: 1rem; margin: 0; }
.voet__gegevens dt { font-family: var(--letter-kop); font-weight: 700; }
.voet__gegevens dd { margin: 0; }
.voet__gegevens a { display: inline-block; padding-block: .6rem; }
.voet__onder {
  max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem;
  font-size: 1rem; color: var(--grijs-licht); border-top: 1px solid var(--navy-licht);
}
.voet__onder p { margin: 0; }
.voet__merk { width: 10rem; }
.voet__lijst { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; }
.voet__lijst a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ---- Het formulier ---- */
/* de honeypot is voor mensen en schermlezers onzichtbaar (display:none zou een bot kunnen herkennen) */
.formulier__pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulier__veld { margin-bottom: 1.25rem; }
.formulier__veld label { display: block; font-weight: 600; margin-bottom: .25rem; }
.formulier__veld input, .formulier__veld textarea {
  display: block; width: 100%; max-width: 100%; box-sizing: border-box; min-height: 2.75rem; padding: .5rem .75rem;
  font: inherit; color: var(--navy); background: var(--wit); border: 2px solid var(--grijs); border-radius: .25rem;  /* 3,59:1 (WCAG 1.4.11) */
}
.formulier__veld [aria-invalid="true"] { border-color: var(--fout); }
.optioneel { font-weight: 400; color: var(--grijs-tekst); }
.veld__fout { display: block; color: var(--fout); font-weight: 600; }
.veld__fout:not(:empty)::before { content: "! "; }
.formulier__status[data-soort="klaar"] { color: var(--goed); font-weight: 600; }
.formulier__status[data-soort="fout"], .formulier__status[data-soort="velden"] { color: var(--fout); font-weight: 600; }
.formulier__noot { font-size: 1rem; }
/* Het onderwerp boven het formulier (B-29): waar het bericht over gaat en wat het helpt om erbij te zetten, in de vorm
   van het "let op"-vlak. De knop eronder is een gewone tekstlink die het onderwerp laat vervallen. */
.formulier__over { margin-bottom: 1.5rem; padding: 1rem 1.25rem .25rem; background: var(--vlak); border-left: 4px solid var(--navy); border-radius: 0 .5rem .5rem 0; }
.formulier__over p { margin: 0; }
.formulier__over-kop strong { font-family: var(--letter-kop); font-weight: 700; }
.formulier__over [data-over-handig] { margin-top: .75rem; font-size: 1rem; }
.formulier__over .lijst { margin: .25rem 0 0; }
.tekstknop {
  min-height: 2.75rem; padding: 0; font: inherit; font-size: 1rem; color: var(--navy); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em;
}
.tekstknop:hover { text-decoration-thickness: 3px; }

/* Geen beweging bij scrollen (B-26): alleen beweging met een functie, bij hover, klik en de snelbalk. */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}