/* Huisstijl TOFS: docs/design.md (voorstel, go/no-go). Alles komt uit het logo: het blauw van "TOFS", het goud van de
   pijl en "TAKE OFF", de ronde, zware letter en de opgaande boog van de pijl.
   Geen inline stijlen: de CSP staat alleen dit bestand toe (style-src 'self'). */

/* Lettertypes van de eigen server, gemaakt door tools/lettertype.py. Licenties in /fonts/. */
@font-face {
  font-family: "Nunito Sans";
  src: url("/fonts/nunito-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/fonts/nunito.woff2") format("woff2");
  font-weight: 700 900;
  font-display: swap;
}

/* Kleuren uit het logo (design.md, "Kleur"); contrast op wit tussen haken. */
:root {
  --inkt: #1d3150;         /* 13,06:1  tekst en koppen; het blauw van het logo, donkerder */
  --blauw: #385988;        /* 7,11:1   logo "TOFS"; knoppen, links, pictogrammen */
  --blauw-licht: #4b6d9e;  /* 5,28:1   hover op een blauwe knop */
  --goud: #b9a73e;         /* 2,42:1   logo, de pijl: alleen vorm en vlak, nooit tekst op wit. Op --inkt 5,39:1 */
  --goud-licht: #cdbe62;   /* hover op een gouden knop */
  --goud-tekst: #7d6f1f;   /* 5,04:1   het goud als tekst op wit (tweede regel van een kop) */
  --grijs-tekst: #5b6576;  /* 5,89:1   bijzaken */
  --rand: #8a93a3;         /* 3,10:1   randen van invoervelden (WCAG 1.4.11), alleen op wit */
  --lijn: #d5dce6;         /* versiering, scheidingslijnen */
  --vlak: #f3f6fa;         /* koel licht vlak (inkt erop 12,05:1) */
  --vlak-donker: #e4eaf2;
  --vlak-goud: #f8f5e6;    /* warm licht vlak, voor de uitnodiging (inkt erop 11,94:1) */
  --wit: #ffffff;
  --fout: #b42318;         /* 6,57:1 */
  --goed: #146c2e;         /* 6,53:1 */
  --schaduw: 0 1px 2px rgb(29 49 80 / .08), 0 8px 20px -8px rgb(29 49 80 / .18);
  --schaduw-hoog: 0 2px 4px rgb(29 49 80 / .08), 0 18px 32px -12px rgb(29 49 80 / .3);
  --zacht: cubic-bezier(.2, .7, .2, 1);
  --snel: 150ms;
  --gewoon: 250ms;
  --boog: clamp(2.5rem, 6vw, 5.5rem);  /* hoogte van de boog uit het logo, als rand van een vlak */
  --hoek: 1rem;                        /* ronde hoeken, zoals de letters van het logo */
  --letter-tekst: "Nunito Sans", system-ui, sans-serif;
  --letter-kop: "Nunito", "Nunito Sans", system-ui, sans-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%; }
body {
  margin: 0; font-family: var(--letter-tekst); font-size: 1.125rem; line-height: 1.6;
  color: var(--inkt); background: var(--wit);
  overflow-x: clip;
}
h1, h2, h3 { font-family: var(--letter-kop); line-height: 1.12; margin: 0 0 1rem; text-wrap: balance; }
h1 { font-weight: 900; font-size: clamp(2.125rem, 1.2rem + 3.6vw, 4.25rem); letter-spacing: -.02em; line-height: 1.04; }
h1, h2 { hyphens: auto; overflow-wrap: break-word; }
.opening > *, .afspraak > *, .contact-pagina > * { min-width: 0; }
h2 { font-weight: 900; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.625rem); letter-spacing: -.015em; }
/* Twee kleuren zoals in het logo: de tweede regel in goud, zoals "TAKE OFF". Op wit het donkere goud (5,04:1). */
.kop-twee .kop__zwaar, .kop-twee .kop__licht { display: block; }
.kop-twee .kop__licht { color: var(--goud-tekst); }
h3 { font-weight: 800; font-size: clamp(1.3125rem, 1.2rem + .5vw, 1.5rem); }
p { margin: 0 0 1rem; }
p, li, dd { max-width: 70ch; }
a { color: var(--blauw); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--inkt); 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, main > div { margin-block: 3rem; }
@media (min-width: 56rem) { main > section, main > div { 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 donker (W3C-techniek C40). */
:focus-visible { outline: 3px solid var(--inkt); outline-offset: 2px; box-shadow: 0 0 0 2px var(--wit); }
:is(.voet, .held, .hulpbalk, .band--navy) :focus-visible { outline-color: var(--wit); box-shadow: 0 0 0 2px var(--inkt); }

/* ---- Knoppen: minstens 44 px hoog (WCAG 2.5.5), rond zoals de letters van het logo ---- */
.knop {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .55rem 1.35rem; box-sizing: border-box;
  font-family: var(--letter-kop); font-weight: 800; font-size: 1.125rem; line-height: 1.2;
  color: var(--wit); background: var(--blauw); border: 2px solid var(--blauw); border-radius: 999px; text-decoration: none; white-space: nowrap;
  transition: background-color var(--snel) ease, border-color var(--snel) ease, color var(--snel) ease, translate var(--snel) ease;
}
.knop:hover { color: var(--wit); background: var(--inkt); border-color: var(--inkt); }
.knop:active { translate: 0 1px; }
.knop--lijn { color: var(--inkt); background: var(--wit); border-color: var(--blauw); }
.knop--lijn:hover { color: var(--inkt); background: var(--vlak); border-color: var(--inkt); }
/* Goud: de hoofdactie op een donker vlak (inkt op goud 5,39:1). */
.knop--goud { color: var(--inkt); background: var(--goud); border-color: var(--goud); }
.knop--goud:hover { color: var(--inkt); background: var(--goud-licht); border-color: var(--goud-licht); }
.knop--lijn-wit { color: var(--wit); background: transparent; border-color: var(--wit); }
.knop--lijn-wit:hover { color: var(--inkt); background: var(--wit); border-color: var(--wit); }
/* De pijl uit het logo achter de hoofdactie: "take off". Neemt de tekstkleur over en gaat bij hover omhoog. */
.knop--pijl::after {
  content: ""; flex: none; width: 1.35em; height: .84em; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%222 2.1 49.5 30.8%22 width=%2250%22 height=%2231%22%3E%3Cpath fill-rule=%22evenodd%22 fill=%22%23B9A73E%22 d=%22M50.509,11.4l-0.036-0.03c-2.258-1.906-6.059-5.222-8.488-7.35 l-1.32-1.146c-0.361-0.314-0.694-0.515-1.006-0.625c-0.018-0.009-0.034-0.015-0.052-0.02c-0.046-0.016-0.093-0.032-0.14-0.043 c-0.05-0.013-0.103-0.023-0.156-0.03c-0.029-0.004-0.059-0.009-0.09-0.011c-0.043-0.005-0.088-0.007-0.134-0.007 c-0.044,0-0.089,0.002-0.134,0.007c-0.031,0.002-0.059,0.007-0.089,0.011c-0.053,0.007-0.106,0.018-0.159,0.03 c-0.045,0.011-0.089,0.027-0.135,0.043c-0.018,0.005-0.036,0.011-0.056,0.02c-0.312,0.113-0.644,0.312-1.004,0.625L36.187,4.02 c-2.43,2.128-6.229,5.444-8.486,7.35l-0.038,0.03c-1.985,1.72-0.498,3.353,0.372,4.221c1.714,1.716,2.969,1.693,4.113,0.549 l3.999-4.004C31.563,27.3,16.393,30.993,7.829,12.709C6.293,9.43,5.792,8.833,4.107,9.249c-2.279,0.568-2.591,1.737-1.503,5.045 c7.702,23.45,32.858,26.637,39.539-2.008l3.881,3.884c1.145,1.144,2.4,1.167,4.114-0.549C51.006,14.753,52.495,13.12,50.509,11.4z%22 /%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate var(--gewoon) var(--zacht);
}
.knop--pijl:hover::after { translate: 2px -3px; }
.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
/* Telefoon: knoppen even breed onder elkaar, in plaats van twee verschillende breedtes. */
@media (max-width: 29.99rem) { .knoppen .knop { flex: 1 1 100%; justify-content: center; } }

/* ---- 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-goud); border-bottom: 2px dashed var(--goud-tekst); }
.proef-open { padding: .5rem .75rem; font-size: 1rem; color: var(--grijs-tekst); border: 2px dashed var(--rand); border-radius: .5rem; }

/* ---- Pictogrammen in een rondje (design.md, "Pictogrammen") ---- */
.icoon { display: inline-block; flex: none; width: 1.25rem; height: 1.25rem; stroke-width: 2; }
.rond {
  display: inline-grid; place-items: center; flex: none; width: 3rem; height: 3rem; box-sizing: border-box;
  color: var(--wit); background: var(--blauw); border-radius: 50%;
  transition: background-color var(--gewoon) var(--zacht), rotate var(--gewoon) var(--zacht);
}
.rond .icoon { width: 1.5rem; height: 1.5rem; stroke-width: 1.75; }
.rond--groot { width: 3.75rem; height: 3.75rem; }
.rond--groot .icoon { width: 1.875rem; height: 1.875rem; }
/* Groot, naast de kop van een pagina: een wit rondje met het pictogram en de gouden pijl die eruit opstijgt. */
.rond--beeld {
  position: relative; width: 13rem; height: 13rem; color: var(--blauw); background: var(--wit); box-shadow: var(--schaduw-hoog);
}
.rond--beeld .icoon { width: 5.5rem; height: 5.5rem; stroke-width: 1.25; }
.rond--beeld::after {
  content: ""; position: absolute; right: -1.75rem; top: .75rem; width: 6rem; height: 3.75rem; background: var(--goud);
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%222 2.1 49.5 30.8%22 width=%2250%22 height=%2231%22%3E%3Cpath fill-rule=%22evenodd%22 fill=%22%23B9A73E%22 d=%22M50.509,11.4l-0.036-0.03c-2.258-1.906-6.059-5.222-8.488-7.35 l-1.32-1.146c-0.361-0.314-0.694-0.515-1.006-0.625c-0.018-0.009-0.034-0.015-0.052-0.02c-0.046-0.016-0.093-0.032-0.14-0.043 c-0.05-0.013-0.103-0.023-0.156-0.03c-0.029-0.004-0.059-0.009-0.09-0.011c-0.043-0.005-0.088-0.007-0.134-0.007 c-0.044,0-0.089,0.002-0.134,0.007c-0.031,0.002-0.059,0.007-0.089,0.011c-0.053,0.007-0.106,0.018-0.159,0.03 c-0.045,0.011-0.089,0.027-0.135,0.043c-0.018,0.005-0.036,0.011-0.056,0.02c-0.312,0.113-0.644,0.312-1.004,0.625L36.187,4.02 c-2.43,2.128-6.229,5.444-8.486,7.35l-0.038,0.03c-1.985,1.72-0.498,3.353,0.372,4.221c1.714,1.716,2.969,1.693,4.113,0.549 l3.999-4.004C31.563,27.3,16.393,30.993,7.829,12.709C6.293,9.43,5.792,8.833,4.107,9.249c-2.279,0.568-2.591,1.737-1.503,5.045 c7.702,23.45,32.858,26.637,39.539-2.008l3.881,3.884c1.145,1.144,2.4,1.167,4.114-0.549C51.006,14.753,52.495,13.12,50.509,11.4z%22 /%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Kop: drie lagen (docs/structuur.md, "Menu"; WCAG 3.2.6). Tot 72rem zit het hoofdmenu achter de knop "Menu" (B-21). ---- */
.hulpbalk { color: var(--wit); background: var(--inkt); 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: #d9dee8; }
.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: 700; text-decoration: none; white-space: nowrap;
  background: linear-gradient(var(--goud), var(--goud)) 0 calc(100% - .5rem) / 0 2px no-repeat;
  transition: background-size var(--gewoon) var(--zacht);
}
.hulp a:hover, .hulp a[aria-current] { color: var(--wit); background-size: 100% 2px; }
@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; } }

.kop { position: relative; z-index: 2; background: var(--wit); }
.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: 9.5rem; }  /* nooit smaller dan 136 px: "FINANCIAL STORES" blijft leesbaar (design.md) */
.kop__actie { order: 2; padding-inline: 1rem; }
/* Telefoon: logo en knop op één rij; de knop zegt "Afspraak" (de naam blijft "Maak een afspraak", _basis.html). */
.kop__breed { display: none; }
@media (max-width: 22.49rem) { .kop__merk img { width: 8.5rem; } .kop__actie { padding-inline: .75rem; } .kop__actie::after { content: none; } }
/* Het menu (B-21). 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 afspraakknop 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: 700; font-size: 1rem; color: var(--wit); border: 0; cursor: pointer;
  background: linear-gradient(var(--goud), var(--goud)) 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(--inkt); }
.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(--lijn); box-shadow: var(--schaduw);
}
.menu:not([data-open]) ul { display: none; }
.menu li { max-width: none; border-top: 1px solid var(--lijn); }
.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: 800; font-size: 1.125rem; color: var(--inkt); text-decoration: none; white-space: nowrap;
}
.menu a::after {
  content: ""; position: absolute; left: 0; bottom: .35rem; width: 2.5rem; height: 3px; border-radius: 3px; background: var(--blauw);
  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__breed { display: inline; }
  .kop__smal { display: none; }
  .kop__merk img { width: 11rem; }
}
@media (min-width: 48rem) { .menu__extra { display: none; } }
/* Groot scherm: logo, menu en knop op één rij; de huidige plek met een blauwe balk onder het woord. */
@media (min-width: 72rem) {
  .kop__binnen { flex-wrap: nowrap; padding-block: 0; }
  .kop__merk img { width: 12rem; }
  .menu { align-self: stretch; margin: 0 auto 0 1.5rem; }
  .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: 5rem; padding: 0 .75rem; font-size: 1.0625rem; }
  .menu a::after { left: .75rem; right: .75rem; bottom: calc(50% - 1.3rem); width: auto; }
}

/* ---- Snelbalk: komt terug als de bezoeker omhoog scrolt (js/kop.js); fixed, dus niets verspringt ---- */
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(--lijn); 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; }
@media (max-width: 22.49rem) { .snelbalk__binnen > .knop { padding-inline: .75rem; } }
/* Dezelfde knop "Menu" als in de kop (B-21), 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(--inkt); background-image: linear-gradient(var(--blauw), var(--blauw)); }
.snelbalk .menu__knop:focus-visible { outline-color: var(--inkt); 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(--lijn); box-shadow: var(--schaduw);
  }
  .snelbalk__menu li { max-width: none; border-top: 1px solid var(--lijn); }
  .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: 800; font-size: 1.125rem; color: var(--inkt); text-decoration: none; white-space: nowrap;
  }
  .snelbalk__menu a::after {
    content: ""; position: absolute; left: 0; bottom: .35rem; width: 2.5rem; height: 3px; border-radius: 3px; background: var(--blauw);
    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, .snelbalk__lang { display: none; }
.snelbalk__merk { flex: none; }
.snelbalk__merk img { display: block; width: 8.5rem; }
@media (min-width: 48rem) {
  .snelbalk__binnen { gap: 1rem; }
  .snelbalk__merk { display: block; margin-right: auto; }
  .snelbalk__binnen > .knop { flex: none; }
  .snelbalk__nummer, .snelbalk__lang { 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 1rem; padding: 0; list-style: none; }
  .snelbalk__tel { padding: 0 .25rem; border: 0; background: none; color: var(--inkt); font-family: var(--letter-tekst); font-weight: 700; }
  .snelbalk__tel:hover { color: var(--inkt); background: none; text-decoration: underline; }
  .snelbalk__bel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); 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: 800; color: var(--inkt); text-decoration: none; white-space: nowrap;
  }
  .snelbalk__menu a::after {
    content: ""; position: absolute; left: .6rem; right: .6rem; bottom: .25rem; height: 3px; border-radius: 3px; background: var(--blauw);
    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); }
}

/* ---- Het vormmotief: de boog uit het logo (design.md). Een vlak over de hele breedte krijgt de boog als rand, via
   een masker, zodat de kleur uit de CSS komt. Op twee plekken met de gouden lijn erlangs: de opening van de
   homepage en de voet. Alle maskerlagen zijn SVG (ook het volle vlak: img/vol.svg), geen gradient: Safari tekent een
   gradient in een masker met ook een SVG-laag pas na selecteren of scrollen (WebKit bug 241079; eigenaar, iPhone,
   02-10-2026). De build zet de SVG's als data-URI in de CSS (tools/build.py, maskers_in_css). ---- */
.opening { position: relative; isolation: isolate; display: grid; gap: 1.5rem; align-items: center; margin-top: 0; padding: 2.5rem 0 calc(var(--boog) + 1.5rem); }
.opening::before {
  content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: var(--vlak);
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1 1%22 preserveAspectRatio=%22none%22%3E%3Crect width=%221%22 height=%221%22/%3E%3C/svg%3E") top / 100% calc(100% - var(--boog) + 1px) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 100%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0,0 H1440 V5 C1000,115 420,120 0,55 Z%22/%3E%3C/svg%3E") bottom / 100% var(--boog) no-repeat;
}
.kruimels + .opening { padding-top: 1rem; }
.kruimels + .opening::before { top: -4.75rem; }
.kruimels { position: relative; z-index: 1; }
.opening__beeld { display: grid; place-items: center; }
@media (min-width: 56rem) {
  .opening { grid-template-columns: 1fr 20rem; gap: 3rem; padding-top: 4rem; padding-bottom: var(--boog); }
  .opening__beeld { margin-bottom: calc(var(--boog) * -.6); }  /* het rondje steekt over de boog */
}
@media (max-width: 55.99rem) { .opening__beeld { display: none; } }  /* telefoon: eerst de tekst en de knoppen */

/* De opening van de homepage: donker, met de gouden lijn langs de boog; rechts de foto (tot die er is een plek). */
.held { color: var(--wit); padding-block: 3rem calc(var(--boog) + 3rem); }
.held::before { background: var(--inkt); }
.held::after {
  content: ""; position: absolute; z-index: -1; left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: calc(var(--boog) * -.02);
  height: var(--boog); background: var(--goud);
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 100%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0,55 C420,120 1000,115 1440,5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%225%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
main > .held { margin-bottom: 2rem; }
.held a:not(.knop) { color: var(--wit); }
.held .kop__licht { color: var(--goud); }  /* 5,39:1 op inkt */
.held .intro { max-width: 36rem; color: #e6eaf1; }
.held h1 { font-size: clamp(2.25rem, 1rem + 4.6vw, 4.75rem); }
/* De foto in de opening. De boog snijdt hem onderaan af, precies zoals het donkere vlak, en de gouden lijn loopt
   eroverheen: foto en vlak zijn één vorm.
   Telefoon en tablet: onder de tekst en de knoppen, over de hele breedte tot de onderrand van het vlak.
   Groot scherm: de foto vult de rechterhelft, van de bovenrand tot de boog, en loopt door tot de rand van het scherm;
   de tekst krijgt de linkerhelft. --foto is de breedte van de foto. */
.held__foto {
  position: relative; z-index: -1; display: grid; aspect-ratio: 3 / 2; margin: .5rem calc(50% - 50vw) calc(-1 * (var(--boog) + 3rem));
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1 1%22 preserveAspectRatio=%22none%22%3E%3Crect width=%221%22 height=%221%22/%3E%3C/svg%3E") top / 100% calc(100% - var(--boog) + 1px) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 100%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0,0 H1440 V5 C1000,115 420,120 0,55 Z%22/%3E%3C/svg%3E") bottom / 100% var(--boog) no-repeat;
}
@media (min-width: 36rem) { .held__foto { aspect-ratio: 2 / 1; } }
.held__foto > * { width: 100%; height: 100%; min-height: 0; box-sizing: border-box; object-fit: cover; }
.held__foto img { object-position: 50% 30%; }
.held__foto .fotoplek {
  aspect-ratio: auto; place-content: end; justify-items: end; padding: 1rem 1rem calc(var(--boog) + 1rem);
  color: #e6eaf1; border: 0; border-radius: 0;
  background: repeating-linear-gradient(135deg, #253c60 0 14px, #2d4670 14px 28px);
}
.held__foto .fotoplek figcaption { max-width: 22rem; text-align: right; }
.held__foto .fotoplek--voorbeeld { padding: 0; border: 0; background: var(--inkt); }
.held__foto .fotoplek--voorbeeld figcaption { left: auto; right: 1rem; bottom: calc(var(--boog) + .75rem); color: var(--inkt); }
@media (min-width: 64rem) {
  .held { --foto: min(44vw, 42rem); grid-template-columns: 1fr; min-height: 34rem; padding-block: 4.5rem calc(var(--boog) + 3rem); }
  .held .opening__tekst { max-width: calc(50% + 50vw - var(--foto) - 3rem); }
  .held h1 { font-size: clamp(2.75rem, 1rem + 3.6vw, 4.25rem); }
  .held__foto {
    position: absolute; top: 0; bottom: 0; right: calc(50% - 50vw); width: var(--foto); margin: 0; aspect-ratio: auto;
    mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1 1%22 preserveAspectRatio=%22none%22%3E%3Crect width=%221%22 height=%221%22/%3E%3C/svg%3E") top / 100% calc(100% - var(--boog) + 1px) no-repeat,
          url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 100%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0,0 H1440 V5 C1000,115 420,120 0,55 Z%22/%3E%3C/svg%3E") right bottom / 100vw var(--boog) no-repeat;  /* hetzelfde stuk boog als het vlak */
  }
  .held__foto .fotoplek { padding: 2rem 2rem calc(var(--boog) + 1.5rem); }
  .held__foto .fotoplek--voorbeeld { padding: 0; }
  .held__foto .fotoplek--voorbeeld figcaption { right: 2rem; bottom: calc(var(--boog) + 1.5rem); }
}

/* De opening van over ons: de foto van de adviseurs ernaast, half over de boog (naar Viisi, docs/voorbeelden.md).
   Tot er een foto is het merkvlak (B-23), alleen naast de tekst. */
.opening__foto { max-width: 32rem; margin-bottom: calc(-1 * (var(--boog) + 2.5rem)); }
.opening__foto .fotoplek, .opening__foto .foto img, .opening__foto .merkvlak { box-shadow: var(--schaduw-hoog); }
@media (max-width: 43.99rem) { .opening__foto--merk { display: none; } }
@media (min-width: 44rem) {
  .opening--foto { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; padding-bottom: var(--boog); }
  .opening--foto .opening__tekst { align-self: center; }
  .opening__foto { max-width: none; margin-bottom: calc(-1 * (var(--boog) + 3rem)); }
}
@media (min-width: 56rem) { .opening--foto { gap: 3rem; } }

/* ---- Banden over de hele breedte, met de boog als bovenrand ---- */
.band { position: relative; isolation: isolate; padding-block: calc(var(--boog) + 2rem) 3rem; }
.band::before {
  content: ""; position: absolute; z-index: -2; inset: 0 calc(50% - 50vw); background: var(--vlak);
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 100%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0,55 C420,120 1000,115 1440,5 V100 H0 Z%22/%3E%3C/svg%3E") top / 100% var(--boog) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1 1%22 preserveAspectRatio=%22none%22%3E%3Crect width=%221%22 height=%221%22/%3E%3C/svg%3E") bottom / 100% calc(100% - var(--boog) + 1px) no-repeat;
}
.band--goud::before { background: var(--vlak-goud); }
@media (min-width: 56rem) { .band { padding-block: calc(var(--boog) + 3.5rem) 5rem; } }
.band--navy { color: var(--wit); }
.band.band--navy::before { background: var(--inkt); }
.band--navy a { color: var(--wit); }

/* ---- Taken op de homepage: drie tegels; de afspraak in goud ---- */
.taken { position: relative; z-index: 1; }
main > .held + .taken { margin-top: 0; }
.tegels { display: grid; gap: 2rem 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .tegels { grid-template-columns: repeat(3, 1fr); } }
.tegel {
  position: relative; padding: 1.5rem 1.5rem 1.25rem; background: var(--wit); border-radius: var(--hoek); box-shadow: var(--schaduw);
  transition: transform var(--gewoon) var(--zacht), box-shadow var(--gewoon) var(--zacht);
}
.tegel:hover { transform: translateY(-3px); box-shadow: var(--schaduw-hoog); }
.tegel h3 { margin-bottom: .5rem; padding-right: 2.5rem; }
.tegel h3 a { color: var(--inkt); text-decoration: none; }
.tegel h3 a::after { content: ""; position: absolute; inset: 0; }  /* de hele tegel klikbaar, één link */
.tegel p { margin: 0; }
.rond--label { position: absolute; top: -1.25rem; right: 1.25rem; box-shadow: 0 0 0 4px var(--wit); }  /* hangt over de rand: kost geen ruimte naast de tekst */
.tegel:hover .rond--label { rotate: -8deg; }
.tegel--sterk { background: var(--goud); }
.tegel--sterk .rond--label { color: var(--goud); background: var(--inkt); }
main > .held + .taken .tegels { padding-top: 1.25rem; }
.tegel:focus-within { outline: 3px solid var(--inkt); outline-offset: 2px; }
.tegel h3 a:focus-visible { outline: none; box-shadow: none; }

/* ---- Het gratis gesprek (homepage): de drie vragen groot ---- */
.gesprek__binnen { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 56rem) { .gesprek__binnen { grid-template-columns: 1.1fr 1fr; gap: 4rem; } }
.vragen { margin: 0; padding: 0; list-style: none; counter-reset: vraag; }
.vragen li {
  position: relative; counter-increment: vraag; padding: 1rem 0 1rem 3.75rem; border-top: 1px solid #e3dcb8;
  font-family: var(--letter-kop); font-weight: 900; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.2;
}
.vragen li:last-child { border-bottom: 1px solid #e3dcb8; }
.vragen li::before {
  content: counter(vraag); position: absolute; left: 0; top: 50%; translate: 0 -50%; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; font-size: 1.125rem; color: var(--inkt); background: var(--goud); border-radius: 50%;
}

/* ---- Onderwerpen als kaarten (homepage) ---- */
.kaarten { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.kaart {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; max-width: none; padding: 1.75rem 1.5rem 1.25rem;
  background: var(--wit); border-radius: var(--hoek); box-shadow: var(--schaduw);
  transition: transform var(--gewoon) var(--zacht), box-shadow var(--gewoon) var(--zacht);
}
.kaart--link:hover { transform: translateY(-3px); box-shadow: var(--schaduw-hoog); }
.kaart .rond { margin-bottom: 1.25rem; }
.kaart--link:hover .rond { background: var(--inkt); rotate: -8deg; }
.kaart h3 { margin-bottom: .5rem; }
.kaart h3 a { color: var(--inkt); text-decoration: none; }
.kaart--link h3 a::after { content: ""; position: absolute; inset: 0; }
.kaart p { margin-bottom: .5rem; }
.kaart__meer, .product__meer { margin: auto 0 0 !important; font-family: var(--letter-kop); font-weight: 800; font-size: 1rem; color: var(--blauw); }
.kaart__meer::after, .product__meer::after { content: "→"; display: inline-block; margin-left: .4em; transition: translate var(--gewoon) var(--zacht); }
.kaart--link:hover .kaart__meer::after, .product--link:hover .product__meer::after { translate: .25rem 0; }
.kaart:focus-within { outline: 3px solid var(--inkt); outline-offset: 2px; }
.kaart h3 a:focus-visible { outline: none; box-shadow: none; }
/* Vier onderwerpen, even zwaar: 2 x 2, op een groot scherm naast elkaar. Telefoon: lage kaarten met het pictogram
   links, zodat de vier onderwerpen op één scherm passen (naar de vestigingen bij Viisi, docs/voorbeelden.md). */
@media (max-width: 35.99rem) {
  .kaarten--bento { gap: 1rem; }
  .kaarten--bento .kaart { display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; padding: 1.25rem; }
  .kaarten--bento .kaart > * { grid-column: 2; }
  .kaarten--bento .kaart > .rond { grid-column: 1; grid-row: 1 / span 3; width: 3rem; height: 3rem; margin: 0; }
  .kaarten--bento .rond .icoon { width: 1.5rem; height: 1.5rem; }
  .kaarten--bento .kaart h3 { margin: .3rem 0 .25rem; }
}
@media (min-width: 36rem) { .kaarten--bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .kaarten--bento { grid-template-columns: repeat(4, 1fr); } }

/* ---- De route (werkwijze): nummers langs een gouden lijn die oploopt naar rechts, zoals de pijl in het logo.
   Telefoon: onder elkaar; groot scherm: zes stappen die elk een tree hoger beginnen. De laatste stap is goud. ---- */
.route { counter-reset: stap; display: grid; gap: 1.5rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.route li { position: relative; counter-increment: stap; display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; max-width: none; }
.route li::before {
  content: counter(stap); grid-row: span 2; position: relative; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem;
  font-family: var(--letter-kop); font-weight: 900; font-size: 1.25rem; color: var(--wit); background: var(--inkt); border-radius: 50%;
}
.route li:last-child::before { color: var(--inkt); background: var(--goud); }
.route li:not(:last-child)::after {
  content: ""; position: absolute; left: calc(1.5rem - 1.5px); top: 3rem; bottom: -1.5rem; width: 3px; background: var(--goud); transform-origin: top;
}
.route h3 { margin: .6rem 0 .25rem; font-size: 1.25rem; }
.route p { margin: 0; font-size: 1rem; }
@media (min-width: 64rem) {
  .route { grid-template-columns: repeat(6, 1fr); gap: 0 1.5rem; --tree: 1.5rem; }
  .route li { display: block; padding-top: calc((6 - var(--n)) * var(--tree)); }
  .route li:nth-child(1) { --n: 1; } .route li:nth-child(2) { --n: 2; } .route li:nth-child(3) { --n: 3; }
  .route li:nth-child(4) { --n: 4; } .route li:nth-child(5) { --n: 5; } .route li:nth-child(6) { --n: 6; }
  .route li::before { margin-bottom: .75rem; }
  /* van dit nummer naar rechts, en met een ronde bocht een tree omhoog naar het volgende */
  .route li:not(:last-child)::after {
    left: 1.5rem; right: auto; top: calc((6 - var(--n)) * var(--tree) + 1.5rem - var(--tree)); bottom: auto;
    width: calc(100% + 1.5rem); height: var(--tree); background: none; box-sizing: border-box;
    border: solid var(--goud); border-width: 0 3px 3px 0; border-bottom-right-radius: .9rem; transform-origin: left;
  }
}

/* ---- Tekstblokken: op een groot scherm de kop links (sticky), de tekst rechts ---- */
.tekstblok h2::before { content: ""; display: block; width: 3rem; height: 4px; margin-bottom: .875rem; border-radius: 4px; background: var(--goud); }
@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(--lijn); }
  main > .tekstblok:not(.band) + .tekstblok:not(.band) { margin-top: 3rem; }
  main > .tekstblok:not(.band):has(+ .tekstblok:not(.band)) { margin-bottom: 3rem; }
}
.samenvatting { padding: 1.75rem; background: var(--vlak); border-radius: var(--hoek); }
.samenvatting p { font-size: 1.1875rem; }
.samenvatting p:last-child { margin-bottom: 0; }

/* ---- Vormen van een blok: de vorm volgt de inhoud ---- */
.letop { position: relative; padding: 1.5rem 1.5rem 1.5rem 4rem; background: var(--vlak-goud); border-radius: var(--hoek); }
.letop__icoon { position: absolute; left: 1.25rem; top: 1.6rem; width: 1.75rem; height: 1.75rem; color: var(--goud-tekst); }
.letop h2 { font-size: 1.375rem; }
.letop .blok__tekst > :last-child { margin-bottom: 0; }
.letop--vlak { background: var(--vlak); }
.letop--vlak .letop__icoon { color: var(--blauw); }
/* Telefoon: het pictogram naast de kop, de tekst over de hele breedte van het vlak. */
@media (max-width: 39.99rem) {
  .letop { padding: 1.25rem; }
  .letop__icoon { left: 1.25rem; top: 1.25rem; }
  .letop h2 { min-height: 1.75rem; padding: .1rem 0 0 2.5rem; }
}
/* Twee blokken naast elkaar, even hoog (over ons: wat wij vragen, en niet tevreden). */
.paar { display: grid; gap: 1.5rem; }
@media (min-width: 56rem) { .paar { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.uitspraak h2 { font-size: 1.125rem; font-weight: 800; letter-spacing: .02em; color: var(--goud-tekst); }
.uitspraak__zin { max-width: 26ch; margin-bottom: 1.5rem; font-family: var(--letter-kop); font-weight: 900; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); line-height: 1.12; letter-spacing: -.015em; }
.band--navy.uitspraak h2 { color: var(--goud); }  /* 5,39:1 op inkt */
/* Zin en uitleg naast elkaar; met spiegel de zin rechts, zodat de blokken van kant wisselen. */
@media (min-width: 56rem) {
  .uitspraak--naast .blok__tekst { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem; align-items: start; }
  .uitspraak--naast h2 { grid-column: 1 / -1; grid-row: 1; }  /* over beide kolommen: zin en uitleg beginnen op één lijn */
  .uitspraak--naast .uitspraak__zin { grid-column: 1; grid-row: 2 / span 8; margin-bottom: 0; }
  .uitspraak--naast .blok__tekst > :not(h2, .uitspraak__zin) { grid-column: 2; font-size: 1.25rem; }
  .uitspraak--naast .blok__tekst > :last-child { margin-bottom: 0; }
  .uitspraak--spiegel h2 { padding-left: calc(50% + 2rem); }  /* boven de zin, die rechts staat */
  .uitspraak--spiegel .uitspraak__zin { grid-column: 2; }
  .uitspraak--spiegel .blok__tekst > :not(h2, .uitspraak__zin) { grid-column: 1; }
}
/* De mensen: tekst met de portretten ernaast, even groot; op een groot scherm de portretten links. */
.mensen { display: grid; gap: 1.5rem; }
.mensen .portretten { grid-template-columns: repeat(2, 1fr); margin: 0; }
@media (min-width: 56rem) {
  .mensen { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
  .mensen .portretten { order: -1; gap: 1.5rem; }
}
.zigzag { display: grid; gap: 1.5rem; }
.zigzag .blok__tekst { position: relative; padding: 1.75rem; background: var(--wit); border-radius: var(--hoek); 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; }
}
.lijst-blokken { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .lijst-blokken { grid-template-columns: repeat(2, 1fr); } }
/* Telefoon: het pictogram links van de tekst, zodat een rij kaarten minder hoog wordt. Onder 360 px niet: daar past
   een lang woord als "Beleggingshypotheek" niet meer naast het pictogram. */
@media (max-width: 39.99rem) {
  .lijst-blokken { gap: 1rem; }
  .lijst-blokken li { padding: 1.25rem; }
}
@media (min-width: 22.5rem) and (max-width: 39.99rem) {
  .lijst-blokken--icoon li { display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; }
  .lijst-blokken--icoon li > * { grid-column: 2; min-width: 0; hyphens: auto; overflow-wrap: break-word; }
  .lijst-blokken--icoon li > .rond { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .lijst-blokken--icoon h3 { margin-top: .3rem; }
}
.lijst-blokken li { max-width: none; padding: 1.5rem; background: var(--vlak); border-radius: var(--hoek); }
.lijst-blokken--icoon { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.lijst-blokken--icoon .rond { margin-bottom: .75rem; }
.lijst-blokken h3 { font-size: 1.25rem; margin-bottom: .35rem; }
.lijst-blokken p { margin: 0; }
.stappen.stappen--kort { margin-bottom: 1.5rem; }
.stappen--kort li::before { grid-row: auto; }
.stappen--kort p { align-self: center; margin: 0; }
.uitklappen { margin-top: 2.5rem; border-bottom: 1px solid var(--lijn); }
.uitklap { border-top: 1px solid var(--lijn); }
.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-weight: 900; font-size: 2rem; line-height: 1; color: var(--blauw); 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; }

/* ---- Kerngegevens (over ons): groot het feit, klein de betekenis ---- */
.feiten dl { display: grid; gap: 1.5rem; margin: 0; }
.feiten div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding-top: 1rem; border-top: 4px solid var(--goud); }
.feiten dd { margin: 0; font-family: var(--letter-kop); font-weight: 900; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.1; letter-spacing: -.02em; }
.feiten dt { margin-top: .25rem; font-size: 1.125rem; color: var(--grijs-tekst); }
@media (min-width: 48rem) { .feiten dl { grid-template-columns: repeat(3, 1fr); } }
/* Telefoon: drie regels met het feit links en de betekenis rechts, in plaats van drie blokken onder elkaar. */
@media (max-width: 47.99rem) {
  .feiten dl { grid-template-columns: auto 1fr; grid-auto-flow: dense; gap: 0; border-bottom: 2px solid var(--goud); }
  .feiten div { display: contents; }
  .feiten dd, .feiten dt { margin: 0; padding: .875rem 0; border-top: 2px solid var(--goud); }
  .feiten dd { grid-column: 1; font-size: 1.75rem; }
  .feiten dt { grid-column: 2; align-self: stretch; display: flex; align-items: center; padding-left: 1.25rem; font-size: 1rem; line-height: 1.35; }
}

/* ---- Onderwerpen per groep: een lijst in twee kolommen, elk met een rondje ---- */
.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: 3rem 1fr; gap: 1.25rem; align-items: start; max-width: none; padding: 1.25rem 0; border-top: 1px solid var(--lijn); }
.product :is(h3, h4) { font-family: var(--letter-kop); font-weight: 800; font-size: 1.3125rem; line-height: 1.15; margin: .35rem 0 .35rem; }
.product p { margin: 0; }
.product--link :is(h3, h4) a { color: var(--inkt); }
.product--link :is(h3, h4) a::after { content: ""; position: absolute; inset: 0; }
.product__meer { margin-top: .5rem !important; }
.product--link:hover .rond { background: var(--inkt); }
.rubriek + .rubriek { margin-top: 2rem; }
.rubriek__kop { font-size: 1.25rem; margin-bottom: .25rem; color: var(--goud-tekst); }
.waarschuwing { display: inline-block; margin-top: .5rem; padding: .5rem 1rem; font-family: var(--letter-kop); font-size: 1.25rem; background: var(--wit); border: 2px solid var(--inkt); border-radius: .75rem; }

/* ---- Afspraak: het formulier als kaart, naast de uitleg ---- */
.afspraak { display: grid; gap: 3rem; align-items: start; }
.afspraak__uitleg > * + * { margin-top: 2.5rem; }
@media (min-width: 60rem) {
  .afspraak { grid-template-columns: 1fr 28rem; gap: 4rem; }
  .afspraak .formulier-blok { grid-column: 2; grid-row: 1; }
  .afspraak__uitleg { grid-column: 1; grid-row: 1; }
}
.formulier-blok--kaart { padding: 1.75rem 1.5rem; background: var(--wit); border-radius: var(--hoek); box-shadow: var(--schaduw-hoog); border-top: 6px solid var(--goud); }
@media (min-width: 40rem) { .formulier-blok--kaart { padding: 2.25rem; } }
main > .opening--pagina:has(+ .afspraak) { margin-bottom: 0; }
.opening--pagina + .afspraak { margin-top: calc(var(--boog) * -.5); position: relative; z-index: 1; }

/* ---- Contact ---- */
.contact-blok { padding: 2rem 1.5rem; background: var(--vlak); border-radius: var(--hoek); }
.gegevens { display: grid; gap: 1rem; margin: 0; }
.gegevens div { display: grid; gap: .1rem; align-content: start; }
.gegevens dt { font-family: var(--letter-kop); font-weight: 800; }
.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: var(--hoek); }
.keuzekaarten dl { margin: 0; }
.keuzekaarten div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--rand); }
.keuzekaarten dt, .keuzekaarten dd { font-size: 1rem; }
.keuzekaarten dd { margin: 0; text-align: right; }
/* Een waarde in woorden past niet naast de vraag: onder elkaar, de waarde vet. Ja en nee blijven rechts. */
.keuzekaarten div:has(dd:not(.ja, .nee)) { grid-template-columns: 1fr; gap: .1rem; }
.keuzekaarten dd:not(.ja, .nee) { text-align: left; font-weight: 700; }
.keuzekaarten div.conclusie { grid-template-columns: 1fr; gap: .1rem; margin-top: .5rem; padding-top: .75rem; border-top: 3px solid var(--goud); }
.keuzekaarten div.conclusie dd { text-align: left; }
.keuzekaarten div.conclusie :is(dt, dd) { font-family: var(--letter-kop); font-weight: 800; }
.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 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--lijn); }
thead th { font-family: var(--letter-kop); font-weight: 900; font-size: 1.125rem; background: var(--vlak); }
thead th:first-child { border-radius: var(--hoek) 0 0 0; }
thead th:last-child { border-radius: 0 var(--hoek) 0 0; }
tbody th { font-weight: 700; }
tbody tr { transition: background-color var(--snel); }
tbody tr:hover { background: var(--vlak); }
td.ja, td.nee { vertical-align: middle; }
.vinkje { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: .3rem; box-sizing: border-box; vertical-align: middle; color: var(--wit); background: var(--blauw); border-radius: 50%; stroke-width: 3; }
.nee__streep { display: inline-block; width: 1.25rem; height: 3px; vertical-align: middle; background: var(--rand); border-radius: 2px; }
tr.conclusie :is(th, td) { font-family: var(--letter-kop); font-weight: 800; background: var(--vlak-goud); border-top: 3px solid var(--goud); border-bottom: 0; }
.noot { font-size: 1rem; color: var(--grijs-tekst); }

/* ---- Plek voor een foto die nog komt: 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(--rand); border-radius: var(--hoek);
  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; } }
@media (max-width: 55.99rem) { .met-foto > .merkvlak { display: none; } }  /* alleen naast de tekst */
section > .fotoplek { margin-top: 1.5rem; }

/* ---- Het merkvlak (B-23; design.md, "Foto's"): waar de foto van de adviseurs zou staan. Inkt, onderin het logoblauw
   onder de boog die rechtsboven opstijgt, met de gouden lijn erlangs, en het negatieve logo. Alleen SVG-maskers
   (WebKit bug 241079, zie het vormmotief). ---- */
.merkvlak {
  position: relative; isolation: isolate; aspect-ratio: 3 / 2; box-sizing: border-box; padding: 9% 8%;
  background: var(--inkt); border-radius: var(--hoek); overflow: hidden;
}
.merkvlak::before, .merkvlak::after { content: ""; position: absolute; z-index: -1; inset: 0; }
.merkvlak::before { background: var(--blauw); mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 300 200%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0,128 C85,178 205,176 300,48 V200 H0 Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.merkvlak::after { background: var(--goud); mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 300 200%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0,128 C85,178 205,176 300,48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%225%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.merkvlak img { display: block; width: 52%; height: auto; }
.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; }
.portretten .fotoplek { border-radius: 50%; aspect-ratio: 1; }
.contact-blok + .fotoplek, .contact-blok + .foto { margin-top: 1.5rem; }
/* Een voorbeeldfoto (stockfoto, B-18) op een fotoplek: de foto met een gestippelde gouden rand en een label in de stijl
   van de proefbalk, zodat niemand hem voor een foto van TOFS aanziet. */
.fotoplek--voorbeeld {
  position: relative; display: block; padding: 0; overflow: hidden; background: var(--vlak-donker);
  border: 3px dashed var(--goud-tekst);
}
.fotoplek--voorbeeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fotoplek--voorbeeld figcaption {
  position: absolute; left: .75rem; bottom: .75rem; max-width: calc(100% - 1.5rem); box-sizing: border-box;
  padding: .375rem .75rem; font-size: .9375rem; line-height: 1.35; text-align: left; color: var(--inkt);
  background: var(--vlak-goud); border: 2px dashed var(--goud-tekst); border-radius: .5rem;
}
/* Portret: de foto rond, het label eronder (in de cirkel past het niet). */
.portretten .fotoplek--voorbeeld { aspect-ratio: auto; overflow: visible; background: none; border: 0; border-radius: 0; }
.portretten .fotoplek--voorbeeld img { aspect-ratio: 1; height: auto; border: 3px dashed var(--goud-tekst); border-radius: 50%; box-sizing: border-box; }
.portretten .fotoplek--voorbeeld figcaption { position: static; max-width: none; margin-top: .5rem; text-align: center; }
.fotoplek--voorbeeld figcaption span::before { content: "· "; }
.portretten .fotoplek--voorbeeld figcaption span { display: block; font-size: .875rem; }
.portretten .fotoplek--voorbeeld figcaption span::before { content: none; }
/* Een echte foto (tools/foto.py): de ronde hoeken van de kaarten, vaste maat uit width en height. */
.foto { margin: 0; }
.foto img { display: block; width: 100%; height: auto; border-radius: var(--hoek); }

/* ---- Productpagina: in het kort, lijsten, lees ook ---- */
.kruimels + .opening h1 { font-size: clamp(2.125rem, 1.3rem + 2.6vw, 3.5rem); }
.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: 1.25rem 1.25rem 1rem; background: var(--wit); border-radius: var(--hoek); box-shadow: var(--schaduw); border-top: 4px solid var(--goud); }
.kort dt { margin-bottom: .25rem; font-family: var(--letter-kop); font-weight: 900; font-size: 1.1875rem; }
.kort dd { margin: 0; }
.lijst { margin: 0 0 1rem; padding-left: 1.25rem; }
.lijst li + li { margin-top: .5rem; }
.lijst li::marker { color: var(--goud-tekst); }
.ook { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .ook { grid-template-columns: repeat(2, 1fr); } }
.ook li { max-width: none; padding: 1.25rem 1.5rem; border: 1px solid var(--lijn); border-radius: var(--hoek); }
.ook a { font-family: var(--letter-kop); font-weight: 800; }
.ook span { display: block; margin-top: .25rem; font-size: 1rem; color: var(--grijs-tekst); }

.stappen { counter-reset: stap; display: grid; gap: 1.5rem; margin: 0 0 1.5rem; 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 {
  content: ""; position: absolute; left: calc(1.5rem - 1.5px); top: 3.5rem; bottom: -1rem; width: 3px; border-radius: 3px; background: var(--goud); 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: 900; font-size: 1.25rem; color: var(--wit); background: var(--inkt); border-radius: 50%;
}
.stappen h3 { margin-bottom: .25rem; align-self: center; }

/* ---- Voet: de donkere afsluiting, met de boog en de gouden lijn als bovenrand ---- */
.voet { position: relative; isolation: isolate; margin-top: 3rem; padding-top: var(--boog); color: var(--wit); }
.voet::before {
  content: ""; position: absolute; z-index: -1; inset: 0; background: var(--inkt);
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 100%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0,55 C420,120 1000,115 1440,5 V100 H0 Z%22/%3E%3C/svg%3E") top / 100% var(--boog) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1 1%22 preserveAspectRatio=%22none%22%3E%3Crect width=%221%22 height=%221%22/%3E%3C/svg%3E") bottom / 100% calc(100% - var(--boog) + 1px) no-repeat;
}
.voet::after {
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: var(--boog); background: var(--goud);
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 100%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0,55 C420,120 1000,115 1440,5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%225%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
@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: 3.5rem; } }
.afsluiting .kop__licht { color: var(--goud); }  /* 5,39:1 op inkt */
.afsluiting h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
.afsluiting__tel { margin-bottom: .5rem; }
.afsluiting__tel a { font-family: var(--letter-kop); font-weight: 900; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); letter-spacing: -.01em; white-space: nowrap; text-decoration: none; }
.afsluiting__tel a:hover { text-decoration: underline; text-decoration-color: var(--goud); }
.voet__gegevens { display: grid; gap: 1rem; margin: 0; }
.voet__gegevens dt { font-family: var(--letter-kop); font-weight: 800; color: var(--goud); }
.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: #d9dee8; border-top: 1px solid #34496b;
}
.voet__onder p { margin: 0; }
.voet__merk { width: 11rem; }
.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 ---- */
.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: 700; margin-bottom: .25rem; }
.formulier__veld :is(input, textarea, select) {
  display: block; width: 100%; max-width: 100%; box-sizing: border-box; min-height: 2.75rem; padding: .5rem .75rem;
  font: inherit; color: var(--inkt); background: var(--wit); border: 2px solid var(--rand); border-radius: .625rem;  /* 3,10:1 (WCAG 1.4.11) */
}
.formulier__veld :is(input, textarea, select):hover { border-color: var(--blauw); }
.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: 700; }
.veld__fout:not(:empty)::before { content: "! "; }
.formulier__actie .knop { width: 100%; justify-content: center; }
@media (min-width: 40rem) { .formulier__actie .knop { width: auto; } }
.formulier__status[data-soort="klaar"] { color: var(--goed); font-weight: 700; }
.formulier__status[data-soort="fout"], .formulier__status[data-soort="velden"] { color: var(--fout); font-weight: 700; }
.formulier__noot { font-size: 1rem; }

/* ---- Geen beweging bij het scrollen (eigenaar, 30-09-2026, na onderzoek; design.md, "Voegen subtiele animaties iets
   toe?"): alleen beweging met een functie, zoals de feedback van knoppen, kaarten en menu hierboven. ---- */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}