/* ==========================================================================
   DevAlp Accountants en Adviseurs
   Blauw en paars, de kleuren die DevAlp zelf gebruikt. Het blauw is dat van
   IRS Salarisburo, dat op hetzelfde adres zit. De vormtaal komt uit drie
   eigen sites: de blauwe bovenbalk en de schuine band van IRS, de hero als
   gekleurde kaart en de strook met usp's van Energie Zaken, en de letter, de
   pil-labels en de rustige kaarten van Taurus.
   ========================================================================== */

@font-face {
  font-family: InstrumentSans;
  src: url("../fonts/instrumentsans-var.woff2") format("woff2");
  font-weight: 500 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: SourceSans;
  src: url("../fonts/sourcesans-var.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: SourceSans;
  src: url("../fonts/sourcesans-var-italic.woff2") format("woff2");
  font-weight: 200 900; font-style: italic; font-display: swap;
}

:root {
  --blauw:       #0F5096;   /* hoofdkleur, knoppen en links (7,9:1 op wit) */
  --blauw-diep:  #0B3D73;   /* hover */
  --blauw-op:    #105AA7;   /* tweede vlak in de schuine band, zoals bij IRS */
  --blauw-tint:  #EAF1FA;
  --paars:       #6A3FB5;   /* tweede merkkleur, accent en de zzp-kant */
  --paars-tint:  #F2EDFB;
  --paars-licht: #CDB8F5;   /* paars leesbaar op blauw */
  /* Het verloop loopt zoals dat van InfiniteMerlin: één rechte overgang onder
     120 graden, zonder tussenstops, met op de grote vlakken twee zachte
     gloeden erover (rechtsboven lichtpaars, linksonder lichtblauw). */
  --verloop:      linear-gradient(120deg, #0F5096, #6A3FB5);
  --verloop-plat: var(--verloop);
  --verloop-gloed:
    radial-gradient(90% 130% at 100% 0%, rgba(176, 140, 255, .42), transparent 60%),
    radial-gradient(70% 100% at 0% 100%, rgba(70, 150, 255, .28), transparent 65%),
    var(--verloop);
  --zacht: cubic-bezier(.22, 1, .36, 1);

  --nacht:       #0A1F3D;   /* de voet */
  --inkt:        #1C2637;   /* tekst */
  --grijs:       #4A5568;   /* bijtekst */
  --grijs-licht: #626D84;
  --lijn:        #E6EBF2;
  --grond:       #F4F7FB;
  --wit:         #FFFFFF;

  --kop: InstrumentSans, "Helvetica Neue", Arial, sans-serif;
  --tekst: SourceSans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --breed: 1180px;
  --smal: 780px;
  --rond: 16px;
  --rond-klein: 12px;
  --schaduw: 0 2px 10px rgba(16,32,58,.06);
  --schaduw-op: 0 24px 60px -24px rgba(10,31,61,.35);

  /* oude namen die nog in inline stijlen en de keuzehulp voorkomen */
  --inkt-zacht: var(--grijs);
  --papier: var(--grond);
  --zzp: var(--paars-tint);
  --mkb: var(--blauw-tint);
  --ronding: var(--rond-klein);
}

/* De zzp-kant. Alles wat binnen .kant-zzp blauw zou zijn, wordt paars: de
   zzp-pagina, de zzp-vormen tussen de andere diensten en een zzp-uitslag in
   de keuzehulp. Bovenbalk, menu en paginakop houden het verloop. */
.kant-zzp {
  --blauw: var(--paars);
  --blauw-diep: #4E2C8C;
  --blauw-tint: var(--paars-tint);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 128px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--wit); color: var(--inkt);
  font: 400 clamp(15.5px, .4vw + 14.4px, 17px)/1.65 var(--tekst);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--kop); font-weight: 700; line-height: 1.14; letter-spacing: -.022em; margin: 0 0 .55em; color: var(--inkt); }
h1 { font-size: clamp(2rem, 4.1vw, 3.2rem); line-height: 1.06; letter-spacing: -.031em; }
h2 { font-size: clamp(1.75rem, 3.3vw, 2.6rem); letter-spacing: -.029em; }
h3 { font-size: clamp(1.14rem, 1.4vw, 1.3rem); letter-spacing: -.015em; }
h4 { font-size: 1rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h2 em, h1 em { font-style: normal; color: var(--paars); }

a { color: var(--blauw); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--blauw-diep); }
img, svg { max-width: 100%; height: auto; display: block; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--blauw); outline-offset: 3px; border-radius: 6px; }

.omhulsel { width: min(100% - 2 * clamp(16px, 4vw, 40px), var(--breed)); margin-inline: auto; }
.smal { width: min(100% - 2 * clamp(16px, 4vw, 40px), var(--smal)); margin-inline: auto; }
.verstopt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a[href^="tel:"] { white-space: nowrap; }  /* een telefoonnummer breekt nooit af */
.overslaan { position: absolute; left: -9999px; top: 0; background: var(--verloop-plat); color: #fff; padding: .7rem 1rem; z-index: 200; border-radius: 0 0 var(--rond-klein) 0; }
.overslaan:focus { left: 0; }

/* ── Bovenbalk, zoals bij IRS ────────────────────────────────────────────── */
/* De bovenbalk blijft bovenaan staan; de kopbalk plakt er direct onder. */
/* De bovenbalk is een vaste strook in hetzelfde verloop als de hero, ook
   boven de doorzichtige kop (Odelin). Het lijntje onder het menu houdt de kop
   en de hero uit elkaar. */
.topbalk { position: sticky; top: 0; z-index: 101; background: var(--verloop-plat); color: #fff; font-size: .86rem; }
.topbalk__rij { display: flex; align-items: center; gap: 1.6rem; height: 38px; }
.topbalk a, .topbalk span { color: rgba(255,255,255,.88); text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.topbalk a:hover { color: #fff; text-decoration: underline; }
.topbalk .icoon { color: var(--paars-licht); }
.topbalk__adres { color: rgba(255,255,255,.88) !important; }
.topbalk__rechts { margin-left: auto; gap: 1.4rem !important; }
@media (max-width: 860px) { .topbalk__adres, .topbalk__rechts { display: none !important; } }
@media (max-width: 480px) { .topbalk a[href^="mailto"] { display: none; } }

/* ── Kopbalk ─────────────────────────────────────────────────────────────── */
.balk {
  position: sticky; top: 38px; z-index: 100; background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.balk--vast { border-bottom-color: var(--lijn); box-shadow: var(--schaduw); }
.balk__rij { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }

/* Het logo van de B.V., nagebouwd in bron/maak-merk.py */
.merk { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.merk img { height: 44px; width: auto; }
@media (max-width: 480px) { .merk img { height: 38px; } }

/* Het menu staat links, direct naast het merk; alleen de knop Kennismaken
   schuift naar rechts. */
.menu { flex: 1; margin-left: 1.6rem; display: flex; align-items: center; gap: .7rem; }
.menu > a, .menu__knop { color: var(--inkt); text-decoration: none; font-size: .96rem; font-weight: 500; padding: .55rem .75rem; border-radius: 10px; white-space: nowrap; transition: color .15s, background .15s; }
.menu > a:not(.knop):hover, .menu__knop:hover { background: var(--grond); color: var(--blauw); }
.menu > a[aria-current="page"], .menu__knop[aria-current="page"] { background: var(--blauw-tint); color: var(--blauw); font-weight: 600; }
.menu__tel { display: none; }
.menu > .knop { margin-left: auto; transition: transform .16s var(--zacht), box-shadow .3s; }
/* Voor klanten als tweede knop, met rand, links van de Keuzehulp (2026-10-06).
   Op de telefoon staat Voor klanten al tussen de tegels onder Meer. */
.menu > .knop + .knop { margin-left: .5rem; }
@media (max-width: 1060px) { .menu > .menu__klanten { display: none; } }
/* Hover en huidige pagina: een licht vlak in plaats van het verloop, zodat hij
   niet gelijk wordt aan de Keuzehulp ernaast en op zijn eigen pagina leesbaar blijft. */
.menu > .menu__klanten:hover, .menu > .menu__klanten[aria-current="page"] { background: var(--blauw-tint); border-color: var(--blauw); color: var(--blauw) !important; transform: none; box-shadow: none; }

/* ── Doorzichtige kop over het verloop ────────────────────────────────────
   Op pagina's die met de hero of een paginakop beginnen (body.kop-over) ligt
   de kop doorzichtig over het verloop, met het witte logo en witte tekst.
   Na een paar pixels scrollen (body.kop-vast, devalp.js) wordt hij weer wit.
   Met het mobiele menu open is hij altijd wit. De bovenbalk blijft altijd
   in het verloop. 114px = bovenbalk 38 + kopbalk 76. */
.merk__wit { display: none; }
.topbalk, .balk { transition: background-color .25s, border-color .25s, box-shadow .2s; }
@media screen {
  .kop-over main { margin-top: -114px; }
  .kop-over .hero { padding-top: 114px; }
  .kop-over .paginakop { padding-top: calc(114px + clamp(1.9rem, 3.6vw, 3rem)); }

  .kop-over:not(.kop-vast):not(:has(.menu--open)) {
    & .balk { background: transparent; backdrop-filter: none; border-bottom-color: rgba(255,255,255,.16); }
    & .merk__kleur { display: none; }
    & .merk__wit { display: block; }
    & .menu > a:not(.knop), & .menu__knop { color: #fff; }
    & .menu > a:not(.knop):hover, & .menu__knop:hover { background: rgba(255,255,255,.12); color: #fff; }
    & .menu > a[aria-current="page"], & .menu__knop[aria-current="page"] { background: rgba(255,255,255,.16); color: #fff; }
    & .menu__pijl { color: rgba(255,255,255,.8); }
    & .menu__pijl:hover { color: #fff; }
    & .menu > .knop { background: #fff; color: var(--blauw) !important; }
    & .hamburger { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
  }
}
@media screen and (min-width: 1061px) {
  .kop-over:not(.kop-vast) .menu__uitklap .menu__knop { background: none !important; }  /* de pil zit op het omhulsel */
  .kop-over:not(.kop-vast) .menu__uitklap:hover { background: rgba(255,255,255,.12); }
  .kop-over:not(.kop-vast) .menu__uitklap:hover .menu__knop { color: #fff; }
  .kop-over:not(.kop-vast) .menu__uitklap:has(.menu__knop[aria-current="page"]) { background: rgba(255,255,255,.16); }
  .kop-over:not(.kop-vast) .menu__uitklap:has(.menu__knop[aria-current="page"]) .menu__pijl { color: #fff; }
}

/* ── Uitklapmenu, zoals bij Taurus ────────────────────────────────────────
   Het paneel staat altijd in de HTML en wordt met zichtbaarheid geregeld. Op
   een breed scherm gaat het open bij hover en bij toetsenbordfocus, dus ook
   zonder JavaScript. Het pijltje is voor aanraakschermen en voor wie klikt. */
.menu__uitklap { position: relative; display: flex; align-items: center; }
.menu__knop { padding-right: .35rem; }
.menu__pijl { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 34px; margin-left: -.2rem; padding: 0; border: 0; background: none; color: var(--grijs); cursor: pointer; border-radius: 8px; }
.menu__pijl svg { transition: transform .2s; }
.menu__pijl:hover { color: var(--blauw); }
.menu__uitklap[data-open="true"] .menu__pijl svg { transform: rotate(180deg); }

.menu__paneel {
  position: absolute; top: calc(100% + 14px); left: 0; z-index: 70;
  width: max-content; max-width: min(92vw, 560px);
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond);
  padding: 1.2rem; box-shadow: 0 18px 44px rgba(15,80,150,.14);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.menu__uitklap[data-open="true"] > .menu__paneel { opacity: 1; visibility: visible; transform: none; }
/* onzichtbare brug over de opening, anders valt het dicht onderweg */
.menu__paneel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.menu__paneelrij { display: grid; grid-auto-flow: column; gap: 1.4rem; }
.menu__groep + .menu__groep { border-left: 1px solid var(--lijn); padding-left: 1.4rem; }
.menu__groepkop { margin: 0 0 .5rem .6rem; font-size: .78rem; font-weight: 600; color: var(--grijs-licht); }
.menu__paneel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.menu__paneel li a { display: block; padding: .5rem .6rem; border-radius: 9px; font-size: .94rem; font-weight: 500; color: var(--inkt); text-decoration: none; white-space: nowrap; transition: background .14s, color .14s; }
.menu__paneel li a:hover, .menu__paneel li a[aria-current="page"] { background: var(--blauw-tint); color: var(--blauw); }
.menu__paneelvoet { display: flex; justify-content: space-between; gap: 1rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--lijn); }
.menu__paneelvoet a { font-size: .9rem; font-weight: 600; color: var(--blauw); text-decoration: none; padding: .3rem .6rem; }
.menu__paneellinks { display: flex; gap: .4rem; margin-left: auto; }
.menu__paneellinks a { white-space: nowrap; }
.menu__paneellinks a:first-child { color: var(--paars); }
.menu__paneellinks a:last-child::after { content: " \2192"; }
/* Spoed onderin het paneel, zoals bij Taurus: een eigen vlakje dat opvalt. */
.menu__paneelvoet a.menu__uitgelicht { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border-radius: 10px; background: var(--paars-tint); color: var(--paars); white-space: nowrap; transition: background .15s, color .15s; }
.menu__paneelvoet a.menu__uitgelicht:hover { background: var(--verloop); color: #fff; text-decoration: none; }
.menu__paneelvoet a:hover { text-decoration: underline; }

@media (min-width: 1061px) {
  /* de achtergrond zit op het omhulsel, zodat de pil om woord én pijltje loopt */
  .menu__uitklap { border-radius: 10px; padding-right: .4rem; transition: background .15s; }
  .menu__uitklap:hover { background: var(--grond); }
  .menu__uitklap:hover .menu__knop { color: var(--blauw); }
  .menu__uitklap:has(.menu__knop[aria-current="page"]) { background: var(--blauw-tint); }
  .menu__uitklap:has(.menu__knop[aria-current="page"]) .menu__pijl { color: var(--blauw); }
  .menu__uitklap .menu__knop:hover, .menu__uitklap .menu__knop[aria-current="page"] { background: none; }
}
@media (hover: hover) and (min-width: 1061px) {
  .menu__uitklap:hover > .menu__paneel, .menu__uitklap:focus-within > .menu__paneel { opacity: 1; visibility: visible; transform: none; }
}

/* De hamburger: drie strepen in een rond vlak, die bij openen een kruis worden. */
.hamburger {
  display: none; margin-left: auto; position: relative; width: 46px; height: 46px; padding: 0; cursor: pointer;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 13px; color: var(--inkt);
  transition: background .2s, border-color .2s;
}
.hamburger span {
  position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .28s var(--zacht), opacity .2s, top .28s var(--zacht), width .28s var(--zacht);
}
.hamburger span:nth-child(1) { top: 16px; }
.hamburger span:nth-child(2) { top: 22px; right: 18px; }
.hamburger span:nth-child(3) { top: 28px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { top: 22px; transform: rotate(-45deg); }
.hamburger:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; }

@media (max-width: 1060px) {
  .hamburger { display: block; }
  /* fixed, maar de kopbalk is door backdrop-filter het kader: 76px is
     dus onder de kopbalk, niet vanaf de bovenrand van het scherm */
  .menu {
    position: fixed; inset: 76px 0 auto; margin: 0; background: var(--wit); border-bottom: 1px solid var(--lijn);
    flex-direction: column; align-items: stretch; gap: 0; padding: .6rem 1rem 1.2rem; display: none;
    max-height: calc(100vh - 114px); overflow-y: auto; box-shadow: var(--schaduw-op);
  }
  .menu--open { display: flex; }
  .menu > a, .menu__knop { padding: .9rem .6rem; border-bottom: 1px solid var(--lijn); border-radius: 0; font-size: 1rem; }
  .menu > a[aria-current="page"], .menu__knop[aria-current="page"] { background: none; }
  .menu__tel { display: block; font-weight: 600; }
  .menu > .knop { margin: 1rem 0 0; border-bottom: 0; border-radius: var(--rond-klein); padding: 1rem; }

  /* in de la schuift het paneel in onder de knop; alleen het pijltje opent hem */
  .menu__uitklap { flex-direction: column; align-items: stretch; }
  .menu__knop { flex: 1; }
  .menu__knop + .menu__pijl { position: absolute; right: .2rem; top: 5px; width: 44px; height: 44px; margin: 0; }
  .menu__paneel { position: static; width: auto; max-width: none; transform: none; border: 0; border-radius: 0; box-shadow: none; padding: .3rem 0 .6rem .6rem; display: none; opacity: 1; visibility: visible; transition: none; border-bottom: 1px solid var(--lijn); }
  .menu__uitklap[data-open="true"] > .menu__paneel { display: block; }
  .menu__paneel::before { display: none; }
  .menu__paneelrij { grid-auto-flow: row; gap: .5rem; }
  .menu__groep + .menu__groep { border-left: 0; padding-left: 0; }
  .menu__paneel li a { white-space: normal; font-size: .97rem; padding: .6rem .7rem; }
  .menu__paneelvoet { flex-direction: column; gap: .2rem; margin-top: .5rem; padding-top: .5rem; }
  .menu__paneellinks { flex-direction: column; gap: .2rem; margin-left: 0; }
  .menu__paneelvoet a.menu__uitgelicht { align-self: flex-start; margin: .2rem 0 .3rem; }
}

/* ── Knoppen ─────────────────────────────────────────────────────────────── */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font: 600 .98rem/1 var(--tekst); text-decoration: none; cursor: pointer;
  padding: 1rem 1.5rem; border-radius: var(--rond-klein); border: 1.5px solid transparent;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.knop:hover { transform: translateY(-1px); }
/* Het verloop is twee keer zo breed als de knop; bij hover schuift het op, zodat
   de knop naar paars kleurt in plaats van te verdwijnen. */
/* Zoals bij InfiniteMerlin: bij hover trekt er een lichtstreep over de knop,
   en bij indrukken geeft hij even mee. */
.knop--vol { position: relative; overflow: hidden; isolation: isolate; background: var(--verloop); color: #fff !important; transition: transform .16s var(--zacht), box-shadow .3s; }
.knop--vol::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%); transform: translateX(-130%); transition: transform .9s var(--zacht); }
.knop--vol:hover { box-shadow: 0 10px 24px -8px rgba(74,63,181,.55); }
.knop--vol:hover::after { transform: translateX(130%); }
.knop--vol:active { transform: scale(.97); }
.knop .icoon { flex: none; }
.knop--inkt { background: var(--nacht); color: #fff !important; }
.knop--rand { border-color: var(--blauw); color: var(--blauw) !important; background: transparent; }
.knop--rand:hover { background: var(--verloop-plat); border-color: transparent; color: #fff !important; }
.knop--wit { background: #fff; color: var(--blauw) !important; }
.knop--wit:hover { background: var(--blauw-tint); }
.knop--licht { border-color: rgba(255,255,255,.55); color: #fff !important; background: transparent; }
.knop--licht:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.knop--klein { padding: .78rem 1.15rem; font-size: .93rem; }

/* ── Secties en pil-labels ───────────────────────────────────────────────── */
.sectie { padding: clamp(64px, 8vw, 112px) 0; background: var(--grond); }
.sectie--wit { background: var(--wit); }
.sectie--tint { background: var(--grond); }

/* Het label boven een sectie. Eerst alleen tekst; sinds 2026-10-10 in een
   glazen pil zoals de kruimels (Odelin vroeg erom, zie onderaan). */
.oog {
  display: block; margin: 0 0 .9rem;
  color: var(--blauw); font-size: .8rem; font-weight: 700; line-height: 1.4;
  letter-spacing: .13em; text-transform: uppercase;
}

.lead { font-size: clamp(1.03rem, 1.1vw, 1.14rem); line-height: 1.62; color: var(--grijs); max-width: 60ch; }
.sectie__kop { max-width: 58ch; margin-bottom: clamp(30px, 3.6vw, 46px); }
.sectie__kop.midden { margin-inline: auto; }
.sectie__kop--breed { max-width: 72ch; }
.sectie__kop--breed .lead { max-width: 62ch; }

/* ── Bergvorm: het merkteken groot achter een gekleurd vlak ──────────────── */

/* ── De berglijn ─────────────────────────────────────────────────────────
   Eigen vorm van DevAlp: de twee toppen uit het logo staan als silhouet op de
   bovenrand van een sectie, zodat twee vlakken in elkaar overlopen in plaats
   van als strepen op elkaar te liggen. De sectie schuift met --berg de
   onderpadding van de sectie erboven in; het masker laat van die strook
   alleen de toppen (img/berg.svg) zien, op vier vijfde van de hoogte.
   Spaarzaam gebruiken, hooguit een paar per pagina, en afwisselend links en
   rechts (.berg-rand--links). De gekleurde band (.sectie--donker) heeft hem
   altijd, rechts. */
.sectie--donker, .berg-rand {
  --berg: clamp(64px, 8vw, 112px);
  --berg-plek: right max(16px, calc((100% - var(--breed)) / 2 + 40px));
  position: relative;
  margin-top: calc(-1 * var(--berg));
  padding-top: calc(var(--berg) + var(--pad-boven, clamp(64px, 8vw, 112px)));
  -webkit-mask:
    url("../img/berg.svg") var(--berg-plek) top calc(var(--berg) * .2) / auto calc(var(--berg) * .8) no-repeat,
    linear-gradient(#000, #000) left 0 top calc(var(--berg) - 1px) / 100% 100% no-repeat;
          mask:
    url("../img/berg.svg") var(--berg-plek) top calc(var(--berg) * .2) / auto calc(var(--berg) * .8) no-repeat,
    linear-gradient(#000, #000) left 0 top calc(var(--berg) - 1px) / 100% 100% no-repeat;
}
.berg-rand--links { --berg-plek: left max(16px, calc((100% - var(--breed)) / 2 + 40px)); }
/* Dezelfde toppen gespiegeld aan de onderkant: de sectie hangt met --berg de
   bovenpadding van de volgende sectie in. Niet samen met .berg-rand op één
   sectie, de maskers zitten elkaar dan in de weg. */
.berg-onder {
  --berg: clamp(64px, 8vw, 112px);
  --berg-plek: right max(16px, calc((100% - var(--breed)) / 2 + 40px));
  position: relative; z-index: 1;
  margin-bottom: calc(-1 * var(--berg));
  padding-bottom: var(--berg);
  -webkit-mask:
    url("../img/berg-onder.svg") var(--berg-plek) bottom calc(var(--berg) * .2) / auto calc(var(--berg) * .8) no-repeat,
    linear-gradient(#000, #000) left 0 top 0 / 100% calc(100% - var(--berg) + 1px) no-repeat;
          mask:
    url("../img/berg-onder.svg") var(--berg-plek) bottom calc(var(--berg) * .2) / auto calc(var(--berg) * .8) no-repeat,
    linear-gradient(#000, #000) left 0 top 0 / 100% calc(100% - var(--berg) + 1px) no-repeat;
}
.berg-onder + .sectie { padding-top: calc(clamp(64px, 8vw, 112px) + clamp(32px, 3.6vw, 52px)); }  /* hangende toppen + lucht */
.sectie--donker {
  --pad-boven: clamp(56px, 7vw, 96px);
  overflow: hidden; color: #fff; background: var(--verloop-gloed);
}
.sectie--donker h2, .sectie--donker h3 { color: #fff; }
.sectie--donker h2 em { color: var(--paars-licht); }
.sectie--donker .lead, .sectie--donker p { color: rgba(255,255,255,.84); }
.sectie--donker a:not(.knop) { color: #fff; }
.sectie--donker .oog { color: var(--paars-licht); }
.sectie--donker .vinklijst { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--rond); padding: .6rem 1.4rem; }

/* ── Voorpagina: hero als kaart met verloop ──────────────────────────────── */
.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--verloop-gloed); color: #fff; }
.hero__kaart {
  display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.4rem, 5vw, 4rem);
}
.hero__tekst { align-self: center; }
.hero h1 { color: #fff; max-width: 19ch; }
/* Het gekleurde woord krijgt één keer een lichtstreep, net als bij InfiniteMerlin. */
.hero h1 em {
  font-style: italic; color: var(--paars-licht);
  background-image: linear-gradient(120deg, var(--paars-licht) 0%, var(--paars-licht) 35%, #fff 50%, var(--paars-licht) 65%, var(--paars-licht) 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: glinster 1.8s var(--zacht) .6s both;
  /* background-clip knipt op het tekstvak; cursief en onderstokken steken
     daarbuiten, dus het vak iets ruimer en de woorden bij elkaar houden. */
  display: inline-block; white-space: nowrap;
  padding: 0 .12em .14em 0; margin: 0 -.12em -.14em 0;
}
@keyframes glinster { to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .hero h1 em { animation: none; background-position: 0 0; } .knop--vol::after { display: none; } }
.hero .lead { color: rgba(255,255,255,.88); }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* rechts in de hero een witte kaart met de twee ingangen, zoals de
   tarievenkaart bij Energie Zaken. Gezichten staan alleen op Over DevAlp. */
/* De kaart is van glas: het verloop schijnt erdoor, de tekst is wit. Zzp en
   ondernemingen houden hun eigen accent, in lichtpaars en lichtblauw. */
.hero__zij {
  align-self: center; display: grid; gap: .7rem; padding: 1.5rem; border-radius: 20px; color: #fff;
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 24px 48px -24px rgba(10,20,60,.45), inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.hero__zijkop { font-family: var(--kop); font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; margin: 0 0 .2rem; color: #fff; }
.ingang { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07); text-decoration: none; color: #fff; transition: border-color .15s, background .15s, transform .2s var(--zacht); }
.ingang:hover { color: #fff; transform: translateY(-2px); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34); }
.ingang__icoon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; }
.ingang__icoon .icoon { width: 22px; height: 22px; }
.ingang--zzp .ingang__icoon { background: rgba(205,184,245,.22); color: #E4D8FB; }
.ingang--mkb .ingang__icoon { background: rgba(140,190,245,.22); color: #D3E6FB; }
.ingang__tekst { display: grid; gap: .1rem; min-width: 0; }
.ingang__tekst em { font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.ingang--zzp em { color: var(--paars-licht); }
.ingang--mkb em { color: #A9CBF2; }
.ingang__tekst strong { font-size: 1rem; line-height: 1.3; color: #fff; }
.ingang__tekst span { font-size: .87rem; color: rgba(255,255,255,.74); line-height: 1.4; text-wrap: balance; }
.ingang__tekst strong { text-wrap: balance; }  /* geen los woord als "dga" op de tweede regel */
.ingang__pijl { margin-left: auto; flex: none; color: rgba(255,255,255,.5); transition: transform .2s var(--zacht), color .15s; }
.ingang:hover .ingang__pijl { transform: translateX(3px); color: #fff; }
.hero__zijvoet { display: flex; align-items: center; gap: .6rem; margin-top: .3rem; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.18); font-size: .9rem; color: rgba(255,255,255,.74); text-decoration: none; }
.hero__zijvoet .icoon { color: #fff; flex: none; }
.hero__zijvoet strong { color: #fff; white-space: nowrap; }
.hero__zijvoet:hover { color: #fff; }
.hero__zijvoet:hover strong { text-decoration: underline; }
@media (max-width: 480px) {
  .ingang { gap: .8rem; padding: .9rem; }
  .ingang__icoon { width: 40px; height: 40px; }
  .ingang__pijl { display: none; }
}

/* De usp's als onderste rij in de hero, gescheiden door dunne lijnen.
   "Twee ingangen" staat er niet bij, dat laat de glazen kaart al zien. */
.usps { display: grid; grid-template-columns: repeat(2, 1fr); padding: clamp(1.4rem, 2.4vw, 2rem) 0 clamp(2rem, 3.4vw, 2.8rem); border-top: 1px solid rgba(255,255,255,.18); }
.usp { display: grid; gap: .15rem; align-content: start; padding: 0 1.6rem; }
.usp:first-child { padding-left: 0; }
.usp + .usp { border-left: 1px solid rgba(255,255,255,.18); }
.usp strong { font-family: var(--kop); font-size: 1.06rem; letter-spacing: -.01em; color: #fff; }
.usp span { font-size: .93rem; color: rgba(255,255,255,.76); line-height: 1.5; max-width: 32ch; }
@media (max-width: 780px) {
  .usps { grid-template-columns: 1fr; gap: 1.1rem; }
  .usp { padding: 0; }
  .usp + .usp { border-left: 0; }
}

/* De twee ingangen */
.routes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.route {
  position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--inkt);
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond);
  padding: clamp(1.4rem, 2.6vw, 2rem); transition: transform .18s, box-shadow .18s, border-color .18s;
}
.route::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: var(--rond) var(--rond) 0 0; background: var(--blauw); }
.route--zzp::before { background: var(--paars); }
.route:hover { transform: translateY(-3px); box-shadow: var(--schaduw-op); border-color: transparent; color: var(--inkt); }
.route__tag { align-self: flex-start; font-size: .8rem; font-weight: 600; padding: .3em .8em; border-radius: 999px; background: var(--blauw-tint); color: var(--blauw-diep); }
.route--zzp .route__tag { background: var(--paars-tint); color: #4E2C8C; }
.route h2, .route h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin: 1rem 0 .5rem; }
.route p { font-size: .98rem; color: var(--grijs); margin-bottom: 1.4rem; }
.route__belofte { align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 600; color: var(--blauw); margin: -.4rem 0 1.4rem; }
.route__belofte::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--blauw-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F5096' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") no-repeat center / 64% 64%; }
.route--zzp .route__belofte { color: var(--paars); }
.route--zzp .route__belofte::before { background-color: var(--paars-tint); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A3FB5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E"); }
/* Onder de twee ingangen: wat ze verbindt. */
.brug { display: flex; align-items: center; gap: 1rem; margin-top: 1.1rem; padding: 1.1rem 1.4rem; border-radius: var(--rond); background: var(--wit); border: 1px solid var(--lijn); position: relative; overflow: hidden; }
.brug::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--paars), var(--blauw)); }
.brug__icoon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--verloop); color: #fff; }
.brug p { margin: 0; color: var(--grijs); font-size: .97rem; }
.brug strong { color: var(--inkt); }
.route__voet { margin-top: auto; display: flex; align-items: center; gap: .85rem; padding-top: 1.2rem; border-top: 1px solid var(--lijn); }
.route__wie { display: grid; font-size: .86rem; color: var(--grijs); line-height: 1.35; }
.route__wie strong { color: var(--inkt); font-size: .95rem; }
.route__gaan { margin-left: auto; font-weight: 600; color: var(--blauw); font-size: .95rem; white-space: nowrap; }
.route--zzp .route__gaan { color: var(--paars); }
.route__gaan::after { content: " \2192"; }

/* ── Foto's ──────────────────────────────────────────────────────────────── */
.foto--leeg { background: linear-gradient(160deg, var(--blauw-tint), var(--paars-tint)); }
.team { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.lid { display: flex; align-items: center; gap: 1.2rem; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond); padding: 1.3rem 1.5rem; }
.sectie--wit .lid { background: var(--grond); border-color: transparent; }
.lid__foto { width: 88px; height: 88px; border-radius: 20px; object-fit: cover; flex: none; }
.lid__tekst h3 { margin: 0 0 .15rem; }
.lid__rol { color: var(--blauw); font-weight: 600; font-size: .84rem; margin-bottom: .2rem; }
/* Een lange titel (Ismail) op één regel waar het vak breed genoeg is, anders
   in twee delen bij de streep; nooit midden in een woord. */
.lid__tekst { container-type: inline-size; min-width: 0; flex: 1; }
.lid__rol .roldeel { white-space: nowrap; }
@container (max-width: 24.5rem) { .lid__rol .roldeel { display: block; } .lid__rol .streep { display: none; } }
.lid--klein .lid__foto { width: 64px; height: 64px; }

/* ── Kaarten, rasters, lijsten ───────────────────────────────────────────── */
.raster { display: grid; gap: 1.1rem; }
.raster--2 { grid-template-columns: repeat(2, 1fr); }
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--4 { grid-template-columns: repeat(4, 1fr); }

.kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond); padding: clamp(1.3rem, 2.2vw, 1.8rem); }
.sectie--wit .kaart { background: var(--wit); }
.kaart__nr {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--blauw-tint); color: var(--blauw); font: 700 .95rem/1 var(--kop); font-variant-numeric: tabular-nums;
}
.kaart h3 { margin: 1rem 0 .5rem; }
.kaart p { font-size: .97rem; color: var(--grijs); }
.kaart--link { text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: box-shadow .18s, transform .18s, border-color .18s; }
.kaart--link:hover { box-shadow: var(--schaduw-op); transform: translateY(-3px); border-color: transparent; color: inherit; }
.kaart__meer { display: inline-block; margin-top: auto; padding-top: 1rem; font-weight: 600; font-size: .95rem; color: var(--blauw); }
.kaart__meer::after { content: " \2192"; }

.vinklijst { list-style: none; margin: 0; padding: 0; }
.vinklijst li { position: relative; padding: .55rem 0 .55rem 1.9rem; border-bottom: 1px solid var(--lijn); font-size: .99rem; }
.vinklijst li:last-child { border-bottom: 0; }
.vinklijst li::before {
  content: ""; position: absolute; left: .15rem; top: .95em; width: .62rem; height: .34rem;
  border-left: 2px solid #22A738; border-bottom: 2px solid #22A738; transform: rotate(-45deg);
}
.sectie--donker .vinklijst li { border-color: rgba(255,255,255,.14); color: #fff; }
.sectie--donker .vinklijst li::before { border-color: #7EE08F; }

/* Stappen: nummers in een rondje, zoals bij Energie Zaken */
.stappen { display: grid; gap: .9rem; }
.stap { display: grid; grid-template-columns: 44px 1fr; gap: 1.1rem; padding: 1.3rem 1.4rem; background: var(--grond); border-radius: var(--rond); }
.sectie:not(.sectie--wit) .stap { background: var(--wit); border: 1px solid var(--lijn); }
.stap__nr { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blauw); color: #fff; font: 700 1rem/1 var(--kop); font-variant-numeric: tabular-nums; }
.stap:nth-child(even) .stap__nr { background: var(--paars); }
.stap h3 { margin: .35rem 0 .3rem; }
.stap p { color: var(--grijs); font-size: .97rem; }

/* Tabel met wat waar hoort */
.tabelraam { overflow-x: auto; border: 1px solid var(--lijn); border-radius: var(--rond); background: var(--wit); }
table.vergelijk { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .97rem; }
table.vergelijk th, table.vergelijk td { padding: .95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--lijn); vertical-align: top; }
table.vergelijk thead th { font: 600 .8rem/1.3 var(--tekst); letter-spacing: .06em; text-transform: uppercase; color: var(--blauw-diep); background: var(--blauw-tint); }
table.vergelijk tbody th { font-weight: 600; }
table.vergelijk tr:last-child th, table.vergelijk tr:last-child td { border-bottom: 0; }
table.vergelijk td[data-waarde="ja"]::before { content: "\2713"; color: #22A738; font-weight: 700; }
table.vergelijk td[data-waarde="nee"]::before { content: "\2013"; color: #9AA4AF; }

/* Prijzen */
.prijs { font-family: var(--kop); font-variant-numeric: tabular-nums; font-size: 2.3rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--blauw); }
.prijs small { font-family: var(--tekst); font-size: .92rem; font-weight: 400; letter-spacing: 0; color: var(--grijs); }
.prijs__bij { font-size: .9rem; color: var(--grijs); margin-top: .7rem; }

/* ── Keuzehulp ───────────────────────────────────────────────────────────── */
.wijzer { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond); box-shadow: var(--schaduw); overflow: hidden; }
/* Bovenin de vier stappen met hun naam, met de meter eronder. */
.wijzer__balk { display: grid; gap: .8rem; padding: 1.1rem clamp(1.4rem, 3vw, 2.4rem); border-bottom: 1px solid var(--lijn); background: linear-gradient(180deg, var(--grond), var(--wit)); }
.wijzer__stappen { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(.6rem, 2vw, 1.6rem); flex-wrap: wrap; }
.wijzer__stappen li { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 600; color: var(--grijs-licht); }
.wijzer__nr { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #C9D3E3; font-size: .78rem; font-variant-numeric: tabular-nums; background: var(--wit); }
.wijzer__stappen li.nu { color: var(--inkt); }
.wijzer__stappen li.nu .wijzer__nr { border-color: transparent; background: var(--verloop); color: #fff; }
.wijzer__stappen li.gedaan { color: var(--blauw); }
.wijzer__stappen li.gedaan .wijzer__nr {
  border-color: var(--blauw); font-size: 0;
  background: var(--blauw-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F5096' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 62% 62%;
}
.wijzer__tel { display: none; }
.wijzer__meter { display: block; height: 4px; background: var(--lijn); border-radius: 99px; overflow: hidden; }
.wijzer__meter i { display: block; height: 100%; background: var(--verloop); width: 0; transition: width .35s var(--zacht); border-radius: 99px; }
.wijzer__binnen { padding: clamp(1.4rem, 3vw, 2.4rem); }
.wijzer__groep { border: 0; margin: 0; padding: 0; min-width: 0; }
.wijzer__vraag { padding: 0; font-family: var(--kop); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); font-weight: 700; letter-spacing: -.02em; margin: 0 0 .35rem; }
.wijzer__uitleg { color: var(--grijs); font-size: .97rem; margin: 0 0 1.4rem; }

/* Elke keuze een kaart: icoon in een blokje, label, korte toelichting en
   rechtsboven een rondje dat een vinkje wordt. */
.opties { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (min-width: 900px) { .opties--drie { grid-template-columns: repeat(3, 1fr); } }
.optie { position: relative; display: block; cursor: pointer; }
.optie input { position: absolute; opacity: 0; width: 0; height: 0; }
.optie__kaart { position: relative; display: flex; align-items: flex-start; gap: .9rem; height: 100%; padding: 1.05rem 2.6rem 1.05rem 1.05rem; border: 1.5px solid var(--lijn); border-radius: 14px; background: var(--wit); transition: border-color .15s, background .15s, box-shadow .2s, transform .2s var(--zacht); }
.optie__icoon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--blauw-tint); color: var(--blauw); transition: background .2s, color .2s; }
.opties--meer .optie__icoon { background: var(--paars-tint); color: var(--paars); }
.optie__tekst { display: grid; gap: .2rem; padding-top: .15rem; }
.optie__tekst strong { font-size: .99rem; font-weight: 600; color: var(--inkt); line-height: 1.3; }
.optie__tekst small { font-size: .87rem; color: var(--grijs); line-height: 1.4; }
.optie__vink { position: absolute; top: .9rem; right: .9rem; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #C9D3E3; background: var(--wit) no-repeat center / 0 0; transition: background-size .15s var(--zacht), border-color .15s; }
.opties--meer .optie__vink { border-radius: 6px; }
.optie:hover .optie__kaart { border-color: #BFD0E6; transform: translateY(-2px); box-shadow: 0 14px 28px -20px rgba(15,80,150,.4); }
.optie input:checked + .optie__kaart { border-color: var(--blauw); background: #F8FAFE; box-shadow: 0 0 0 3px rgba(15,80,150,.08); }
.optie input:checked + .optie__kaart .optie__icoon { background: var(--verloop); color: #fff; }
.optie input:checked + .optie__kaart .optie__vink {
  border-color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 70% 70%, var(--verloop);
}
.optie input:focus-visible + .optie__kaart { outline: 2px solid var(--blauw); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .optie:hover .optie__kaart { transform: none; } }
@media (max-width: 640px) {
  .wijzer__stappen li:not(.nu) { font-size: 0; gap: 0; }
  .opties { grid-template-columns: 1fr; }
}

.wijzer__voet { display: flex; align-items: center; gap: .8rem; margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--lijn); flex-wrap: wrap; }
.wijzer__voet > .knop { margin-left: auto; }
.wijzer__terug { background: none; border: 0; color: var(--grijs); font: 500 .95rem var(--tekst); cursor: pointer; padding: .6rem 0; }
.wijzer__terug:hover { color: var(--inkt); }
/* De uitslag: het advies groot, waarop het gebaseerd is, de knoppen, en wat
   er precies in zit ingeklapt. */
.uitslag__label { margin: 0 0 .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--blauw); }
.uitslag__naam { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; margin: 0 0 .6rem; max-width: 24ch; text-wrap: balance; }
.uitslag__kern { font-size: 1.08rem; color: var(--grijs); max-width: 50ch; margin: 0; }
.uitslag__kop .prijs { margin-top: .9rem; }
.uitslag__omdat { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1.2rem; font-size: .86rem; }
.uitslag__omdat span { color: var(--grijs-licht); margin-right: .2rem; }
.uitslag__omdat em { font-style: normal; font-weight: 600; color: var(--blauw); background: var(--blauw-tint); padding: .25em .7em; border-radius: 999px; }
.uitslag__knoppen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.uitslag__meer { margin-top: 1.6rem; border-top: 1px solid var(--lijn); }
.uitslag__meer summary { cursor: pointer; list-style: none; padding: 1rem 0; font-weight: 600; color: var(--blauw); display: flex; align-items: center; gap: .5rem; }
.uitslag__meer summary::-webkit-details-marker { display: none; }
.uitslag__meer summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.uitslag__meer[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.uitslag__vak { display: grid; gap: 1.2rem 2rem; grid-template-columns: 1fr 1fr; padding-bottom: .4rem; }
.uitslag__vak h4 { font-size: .95rem; margin-bottom: .5rem; }
.uitslag__note { margin: 0 0 0 auto; font-size: .86rem; color: var(--grijs-licht); max-width: 44ch; text-align: right; }


/* ── Formulier ───────────────────────────────────────────────────────────── */
.formulier { display: grid; gap: 1.1rem; }
.veld { display: grid; gap: .4rem; }
.veld label { font-weight: 600; font-size: .94rem; }
.veld input, .veld select, .veld textarea {
  font: 400 1rem var(--tekst); color: var(--inkt); background: var(--wit);
  border: 1.5px solid var(--lijn); border-radius: 10px; padding: .85rem .95rem; width: 100%;
}
.veld textarea { min-height: 140px; resize: vertical; }
.veld input:focus, .veld select:focus, .veld textarea:focus { border-color: var(--blauw); outline: none; box-shadow: 0 0 0 4px rgba(15,80,150,.12); }
.veld--fout input, .veld--fout select, .veld--fout textarea { border-color: #B3261E; }

/* Keuzelijst: de eigen dropdown over de verborgen select (devalp.js). */
.keuzelijst { position: relative; }
.keuzelijst__bron { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.keuzelijst__knop {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; cursor: pointer;
  font: 400 1rem var(--tekst); color: var(--inkt); background: var(--wit);
  border: 1.5px solid var(--lijn); border-radius: 10px; padding: .85rem .95rem;
  transition: border-color .15s, box-shadow .15s;
}
.keuzelijst__knop::after {
  content: ""; flex: none; width: 8px; height: 8px; margin: -4px .2rem 0 0;
  border-right: 2px solid var(--blauw); border-bottom: 2px solid var(--blauw); transform: rotate(45deg); transition: transform .2s;
}
.keuzelijst.is-open .keuzelijst__knop::after { transform: rotate(-135deg); margin-top: 4px; }
.keuzelijst__knop:hover { border-color: #C9D3E3; }
.keuzelijst__knop:focus-visible, .keuzelijst.is-open .keuzelijst__knop { border-color: var(--blauw); outline: none; box-shadow: 0 0 0 4px rgba(15,80,150,.12); }
.veld--fout .keuzelijst__knop { border-color: #B3261E; }
.keuzelijst__lijst {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0;
  max-height: min(380px, 60vh); overflow-y: auto; margin: 0; padding: .45rem; list-style: none;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond); box-shadow: 0 18px 44px rgba(15,80,150,.16);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s;
}
.keuzelijst.is-open .keuzelijst__lijst { opacity: 1; visibility: visible; transform: none; }
.keuzelijst__groep { margin: .55rem .6rem .25rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grijs-licht); }
.keuzelijst__groep--zzp { color: var(--paars); }
.keuzelijst__groep--mkb { color: var(--blauw); }
.keuzelijst__lijst [role="option"] {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem .7rem; border-radius: 9px; font-size: .96rem; cursor: pointer; color: var(--inkt);
}
.keuzelijst__lijst [role="option"]:hover, .keuzelijst__lijst [role="option"].is-nu { background: var(--blauw-tint); color: var(--blauw); }
.keuzelijst__lijst [role="option"][aria-selected="true"] { font-weight: 600; color: var(--blauw); }
.keuzelijst__lijst [role="option"][aria-selected="true"]::after {
  content: ""; flex: none; width: 10px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-2px);
}
.veld__fout { color: #B3261E; font-size: .88rem; }
.veld__hulp { color: var(--grijs); font-size: .88rem; }
.veld__optie { font-weight: 400; color: var(--grijs-licht); }
.rij2 { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
.akkoord { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; color: var(--grijs); }
/* Het vinkje in de huisstijl: een afgerond vakje, aangevinkt in het verloop
   met een wit vinkje. Data-URI mag onder de CSP (img-src data:). */
.akkoord input {
  appearance: none; -webkit-appearance: none; cursor: pointer; flex: 0 0 auto;
  width: 1.3rem; height: 1.3rem; margin: .1rem 0 0; border: 1.5px solid #C9D3E3; border-radius: 6px;
  background: var(--wit) no-repeat center / 0 0; transition: border-color .15s, box-shadow .15s, background-size .15s var(--zacht);
}
.akkoord input:hover { border-color: var(--blauw); }
.akkoord input:focus-visible { outline: none; border-color: var(--blauw); box-shadow: 0 0 0 4px rgba(15,80,150,.14); }
.akkoord input:checked {
  border-color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 72% 72%, var(--verloop);
}
.akkoord span { padding-top: .1rem; }
.veld--fout .akkoord input, .akkoord.veld--fout input { border-color: #B3261E; }
.honing { position: absolute; left: -9999px; }
.melding { padding: 1rem 1.2rem; border-radius: var(--rond-klein); background: #FBEDEC; color: #8A1C15; font-size: .95rem; }

/* ── Veelgestelde vragen ─────────────────────────────────────────────────── */
.vraag { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond-klein); margin-bottom: .6rem; }
.sectie--wit .vraag { background: var(--grond); border-color: transparent; }
.vraag summary { cursor: pointer; list-style: none; padding: 1.1rem 3.2rem 1.1rem 1.3rem; font-weight: 600; position: relative; font-size: 1.03rem; }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
  content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--blauw-tint); color: var(--blauw); font: 600 1.15rem/1 var(--kop);
}
.vraag[open] summary::after { content: "\2212"; background: var(--verloop-plat); color: #fff; }
.vraag__antwoord { padding: 0 1.3rem 1.3rem; color: var(--grijs); }

/* ── Slotoproep ──────────────────────────────────────────────────────────
   Geen gekleurde kaart (die heeft Odelin al op elke site) maar een eigen
   zachte band over de volle breedte, van lichtblauw naar lichtpaars, met een
   grote kop en de berglijn links. Zo staat hij los van de pagina zonder een
   doos te zijn. */
.oproep.sectie--wit { --pad-boven: clamp(36px, 4vw, 56px); background: linear-gradient(120deg, var(--blauw-tint), var(--paars-tint)); padding-bottom: clamp(36px, 4vw, 56px); }
.oproep.sectie--wit:not(.berg-rand) { padding-top: clamp(36px, 4vw, 56px); }
.oproep__raam { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; }
.oproep h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.08; margin-bottom: .7rem; max-width: 20ch; text-wrap: balance; }
.oproep .lead { margin: 0; max-width: 80ch; text-wrap: pretty; }
/* Knoppen onder elkaar en even breed, zo breed als de langste. */
.oproep__knoppen { display: grid; grid-template-columns: max-content; gap: .8rem; justify-content: end; }
.oproep__knoppen .knop { justify-content: center; }

/* ── Voet ────────────────────────────────────────────────────────────────── */
.voet { background: var(--nacht); color: rgba(255,255,255,.72); padding: clamp(48px, 6vw, 72px) 0 1.6rem; font-size: .95rem; }
.voet a { color: rgba(255,255,255,.88); text-decoration: none; }
.voet a:hover { color: #fff; text-decoration: underline; }
.voet__raam { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 2rem; }
.voet h4 { color: #fff; font-size: .95rem; margin-bottom: 1rem; letter-spacing: -.01em; }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.voet h4.voet__kop2 { margin-top: 1.8rem; }
.voet__contact li { display: flex; align-items: center; gap: .6rem; }
.voet__contact .icoon, .voet__tijdenkop .icoon { width: 16px; height: 16px; flex: none; color: var(--paars-licht); }
.voet__tijden { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.1); }
.voet__tijdenkop { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.voet__tijden dl { margin: 0; display: grid; gap: .3rem; font-size: .9rem; }
.voet__tijden dl div { display: flex; justify-content: space-between; gap: 1rem; }
.voet__tijden dd { margin: 0; color: #fff; }
.voet__afspraak { margin: 0; font-size: .9rem; line-height: 1.55; color: rgba(255,255,255,.84); }
.voet__merk { display: inline-flex; margin-bottom: 1.1rem; }
.voet__merk img { height: 44px; width: auto; }
.voet__slot { margin-top: 2.8rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; font-size: .87rem; color: rgba(255,255,255,.55); }
.voet__slot a { color: rgba(255,255,255,.6); }
.voet__tel { font-variant-numeric: tabular-nums; }

/* De makervermelding klein rechts in de onderste regel, met het draaiende
   sterretje in het lichte paars, zoals op de andere klantsites. */
.voet__slot .voet__credit { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.45); text-decoration: none; transition: color .2s; }
.voet__slot .voet__credit:hover { color: #fff; }
.im-ster { width: 13px; height: 13px; flex: none; display: inline-block; animation: im-draai 9s linear infinite; }
@supports (mask-image: url("../img/infinitemerlin.svg")) or (-webkit-mask-image: url("../img/infinitemerlin.svg")) {
  .im-ster {
    background-color: var(--paars-licht);
    -webkit-mask: url(../img/infinitemerlin.svg) center / contain no-repeat;
    mask: url(../img/infinitemerlin.svg) center / contain no-repeat;
    filter: drop-shadow(0 0 4px rgba(205,184,245,.55));
  }
}
.im-naam { font-weight: 700; color: var(--paars-licht); }
@keyframes im-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .im-ster { animation: none; } }
@media (max-width: 640px) { .voet__slot .voet__credit { margin-left: 0; } }

/* ── Paginakop van de binnenpagina's: dezelfde kaart als de hero ─────────── */
/* De paginakop is een smalle band: alleen kruimels, titel en een zin. */
.paginakop { position: relative; overflow: hidden; isolation: isolate; background: var(--verloop-gloed); color: #fff; padding: clamp(1.9rem, 3.6vw, 3rem) 0; }
.paginakop + .sectie { padding-top: clamp(44px, 5.5vw, 78px); }
/* met de hangende toppen: ruimte voor de toppen onder de kop en erboven */
.paginakop.berg-onder { padding-bottom: calc(var(--berg) + clamp(1.9rem, 3.6vw, 3rem)); }
.paginakop.berg-onder + .sectie { padding-top: calc(clamp(64px, 8vw, 112px) * .8 + clamp(20px, 2.4vw, 32px)); }  /* net onder de toppen */
.paginakop h1 { color: #fff; max-width: 20ch; margin-bottom: .35em; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.paginakop .lead { color: rgba(255,255,255,.86); }
/* Kruimelpad als glazen pil, zoals de kaart in de hero: huisje, Home, een
   chevron met lucht eromheen en de huidige pagina iets lichter. */
.kruimels { margin-bottom: 1.3rem; }
.kruimels ol {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: .2rem .7rem; margin: 0; padding: .4rem .95rem;
  list-style: none; border-radius: 999px; font-size: .86rem; line-height: 1.3;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.kruimels li { display: inline-flex; align-items: center; gap: .7rem; color: rgba(255,255,255,.72); }
.kruimels li + li::before {
  content: ""; width: 6px; height: 6px; flex: none; margin-right: .1rem;
  border-top: 1.5px solid rgba(255,255,255,.55); border-right: 1.5px solid rgba(255,255,255,.55); transform: rotate(45deg);
}
.kruimels a { display: inline-flex; align-items: center; gap: .4rem; color: #fff; font-weight: 600; text-decoration: none; }
.kruimels a .icoon { width: 14px; height: 14px; }
.kruimels a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ── Losse hulpjes ───────────────────────────────────────────────────────── */
.mt2 { margin-top: 2rem; }
.mt1 { margin-top: 1.2rem; }
.midden { text-align: center; }
.midden > img { margin-inline: auto; }
.tweeluik { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4.4vw, 4rem); align-items: start; }
.zijkaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond); padding: clamp(1.4rem, 2.4vw, 2rem); box-shadow: var(--schaduw); }
.sectie--wit .zijkaart { background: var(--grond); border-color: transparent; box-shadow: none; }
.zijkaart h3 { font-size: 1.2rem; }
.merkstreep { width: 46px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--blauw), var(--paars)); margin-bottom: 1.2rem; }
.citaat { font-family: var(--kop); font-size: 1.22rem; line-height: 1.45; letter-spacing: -.01em; }
.klein { font-size: .9rem; color: var(--grijs); }
.icoon { flex: none; }

@media (max-width: 960px) {
  .hero__kaart { grid-template-columns: 1fr; }
  .tweeluik, .oproep__raam, .uitslag__vak, .raster--4, .raster--3, .rij2, .routes { grid-template-columns: 1fr; }
  .raster--4 { grid-template-columns: 1fr 1fr; }
  .oproep__knoppen { grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: start; }
  .voet__raam { grid-template-columns: 1fr 1fr; }
  .raster--2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .raster--4, .team { grid-template-columns: 1fr; }
  .voet__raam { grid-template-columns: 1fr; }
  .route__voet { flex-wrap: wrap; }
  .route__gaan { margin-left: 0; width: 100%; }
}

@media print {
  .topbalk, .balk, .voet__credit, .oproep, .hamburger { display: none; }
  .hero, .paginakop { background: #fff; color: var(--inkt); }
}

/* Klassen in plaats van style-attributen: de CSP op de server (style-src
   'self') laat geen inline stijlen toe, dus die werkten lokaal wel en online
   niet. */
.voet__noot { color: rgba(255,255,255,.55); }
.knop--breed { width: 100%; }
.mt-s { margin-top: .8rem; }
.prijs--klein { font-size: 1.4rem; }
.prijs--groot { font-size: 3rem; }
.lead--midden { margin-inline: auto; }
.knoprij { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }

/* ── Contact, naar Taurus en Pay to Payroll: wit, rustig en geordend ───── */
.contactkaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem, 1.6vw, 1.2rem); }
.contactkaart {
  display: flex; flex-direction: column; color: var(--inkt);
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond); padding: clamp(1.3rem, 2.2vw, 1.7rem);
}
.contactkaart__icoon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: var(--blauw-tint); border: 1px solid #D9E4F3; color: var(--blauw); margin-bottom: 1.1rem; }
.contactkaart__kop { font-size: .86rem; font-weight: 600; color: var(--grijs-licht); }
.contactkaart__waarde { font: 700 clamp(1.2rem, 1.8vw, 1.5rem)/1.2 var(--kop); letter-spacing: -.02em; color: var(--inkt); margin: .2rem 0 .7rem; overflow-wrap: anywhere; text-decoration: none; align-self: flex-start; -webkit-user-drag: none; user-select: text; }
.contactkaart__waarde:hover { color: var(--blauw); text-decoration: underline; text-underline-offset: .15em; }
.contactkaart__noot { font-size: .93rem; color: var(--grijs); }
.contact__strook { display: flex; gap: .7rem; align-items: center; margin: 1rem 0 0; padding: .8rem 1.1rem; border-radius: 12px; background: var(--blauw-tint); color: var(--grijs); font-size: .93rem; }
.contact__strook .icoon { flex: none; color: var(--blauw); }

.contactraam { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(1rem, 2.4vw, 1.8rem); margin-top: clamp(2.4rem, 5vw, 3.6rem); align-items: stretch; }
.contactraam__formulier { background: var(--wit); border: 1px solid var(--lijn); border-radius: 22px; padding: clamp(1.5rem, 3.2vw, 2.6rem); box-shadow: 0 18px 40px -28px rgba(16,32,58,.25); }
.contactraam__formulier h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: .3em; }
.contactraam__intro { color: var(--grijs); margin: 0 0 1.5rem; }
/* Het formulier vult de kaart tot onderaan, even lang als de kolom ernaast:
   het berichtveld groeit mee. */
.contactraam__formulier { display: flex; flex-direction: column; }
.contactraam__formulier .formulier { flex: 1; display: flex; flex-direction: column; }
.contactraam__formulier .veld:has(textarea) { flex: 1; grid-template-rows: auto 1fr; }
.contactraam__formulier textarea { min-height: 160px; height: 100%; }
.contactraam__formulier:has(.keuzeoverzicht:not([hidden])) textarea { min-height: 70px; }
.contactraam__zij { display: grid; gap: 1rem; grid-template-rows: 1fr auto; }
/* Bereikbaar zakt naar onderen, zodat de kaart vol oogt naast het formulier. */
.gegevens--zakelijk { display: flex; flex-direction: column; }
/* Per onderneming een blokje in de kleur van haar kant (blauw B.V., paars
   vof via .kant-zzp), daaronder het adres en de openingstijden. */
.zaak { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 0; border-top: 1px solid var(--lijn); }
.gegevens h3 + .zaak { border-top: 0; padding-top: .2rem; }
.zaak__icoon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--blauw-tint); color: var(--blauw); }
.zaak__icoon .icoon { width: 19px; height: 19px; }
.zaak em { display: block; font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blauw); margin-bottom: .15rem; }
.zaak strong { display: block; font-size: .98rem; line-height: 1.35; }
.zaak > div > span { display: block; font-size: .92rem; color: var(--grijs); }
.zaak__nrs { display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem; margin: .5rem 0 0; font-size: .88rem; font-variant-numeric: tabular-nums; }
.zaak__nrs div { display: contents; }
.zaak__nrs dt { color: var(--grijs-licht); font-weight: 600; font-size: .78rem; letter-spacing: .06em; padding-top: .1rem; }
.zaak__nrs dd { margin: 0; color: var(--inkt); }
.zaak > div > .zaak__wie { margin-top: .45rem; font-size: .86rem; color: var(--blauw); font-weight: 600; }
.zaak--adres .zaak__icoon { background: var(--grond); color: var(--inkt); }
.zaak > div > .zaak__navi { margin-top: .45rem; font-size: .84rem; line-height: 1.45; color: var(--grijs); background: var(--grond); border-radius: 8px; padding: .45rem .6rem; }
.zaak__route { display: inline-block; margin-top: .35rem; font-size: .88rem; font-weight: 600; color: var(--blauw); text-decoration: none; }
.zaak__route:hover { text-decoration: underline; }
.gegevens__tijden dl { margin: .5rem 0 .5rem; display: grid; gap: .25rem; font-size: .9rem; }
.gegevens__tijden dl div { display: flex; justify-content: space-between; gap: 1rem; }
.gegevens__tijden dt { color: var(--grijs); }
.gegevens__tijden dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.gegevens--zakelijk .gegevens__tijden { margin-top: auto; }

.gegevens { background: var(--wit); border: 1px solid var(--lijn); border-radius: 18px; padding: clamp(1.3rem, 2.2vw, 1.7rem); }
.gegevens h3 { font-size: 1.1rem; margin-bottom: 1rem; }
.gegevens__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.gegevens__lijst li { display: flex; gap: .8rem; align-items: flex-start; font-size: .96rem; line-height: 1.5; }
.gegevens__lijst .icoon { flex: none; color: var(--blauw); margin-top: .2rem; }
.gegevens__lijst span { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--grijs-licht); margin-bottom: .1rem; }
.gegevens__lijst a { color: var(--inkt); text-decoration: none; }
.gegevens__lijst a:hover { color: var(--blauw); text-decoration: underline; }
.gegevens__lijst .gegevens__route { display: inline-block; margin-top: .3rem; color: var(--blauw); font-weight: 600; font-size: .9rem; }
.gegevens__tijden { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--lijn); }
.gegevens__tijden h4 { display: flex; align-items: center; gap: .5rem; font-size: .98rem; margin: 0 0 .3rem; }
.gegevens__tijden h4 .icoon { color: var(--blauw); }
.gegevens__tijden p { margin: 0; font-size: .93rem; color: var(--grijs); }
.gegevens__raster { margin: 0; display: grid; gap: .9rem; }
.gegevens__raster dt { font-size: .8rem; color: var(--grijs-licht); }
.gegevens__raster dd { margin: .1rem 0 0; font-weight: 600; font-size: .95rem; }
.gegevens__raster dd span { display: block; font-weight: 400; font-size: .88rem; color: var(--grijs); margin-top: .1rem; }
.gegevens--nieuw { display: grid; gap: .3rem; text-decoration: none; color: #fff; background: var(--verloop-gloed); border: 0; transition: transform .2s var(--zacht); }
.gegevens--nieuw:hover { transform: translateY(-2px); color: #fff; }
.gegevens--nieuw .gegevens__pijl { transition: transform .2s var(--zacht); }
.gegevens--nieuw:hover .gegevens__pijl { transform: translateX(4px); }
.gegevens--nieuw strong { font: 700 1.1rem var(--kop); }
.gegevens--nieuw span { color: rgba(255,255,255,.86); font-size: .94rem; }
.gegevens--nieuw .gegevens__pijl { color: #fff; font-weight: 600; margin-top: .4rem; }

@media (max-width: 900px) {
  .contactkaarten, .contactraam { grid-template-columns: 1fr; }
}

/* Spoed */
.spoedregel { display: flex; gap: .5rem; align-items: flex-start; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--lijn); }
.spoedregel .icoon { flex: none; color: var(--paars); margin-top: .2rem; }
.spoedkaart .knop .icoon { margin-right: .2rem; }

/* ── Over DevAlp ─────────────────────────────────────────────────────────── */
.overkantoor { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.overkantoor h2 { max-width: 16ch; }
.overkantoor .lead { font-size: clamp(1.12rem, 1.5vw, 1.3rem); color: var(--inkt); margin-bottom: 1rem; }
.overkantoor .lead + p { color: var(--grijs); }
/* Drie harde feiten, het getal groot in het verloop. */
.feiten { margin: 0; display: grid; gap: 0; border-left: 1px solid var(--lijn); }
.feiten div { display: grid; grid-template-columns: 6.5rem 1fr; align-items: baseline; gap: 1rem; padding: 1.1rem 0 1.1rem clamp(1.2rem, 3vw, 2.2rem); }
.feiten div + div { border-top: 1px solid var(--lijn); }
.feiten dt { justify-self: start; font: 700 clamp(2.2rem, 3.6vw, 3rem)/1 var(--kop); letter-spacing: -.03em; background: var(--verloop); -webkit-background-clip: text; background-clip: text; color: transparent; }
.feiten dd { margin: 0; color: var(--grijs); font-size: 1rem; }

/* De twee mensen, elk in de kleur van hun ingang: zzp paars, ondernemingen blauw. */
.personen { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); }
.persoon { position: relative; display: flex; flex-direction: column; background: var(--wit); border: 1px solid var(--lijn); border-radius: 20px; padding: clamp(1.4rem, 2.6vw, 2rem); overflow: hidden; }
.persoon::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--blauw); }
.persoon--zzp::before { background: var(--paars); }
.persoon__kop { display: flex; gap: 1.2rem; align-items: center; margin-bottom: 1.3rem; }
.persoon__foto { width: 88px; height: 88px; border-radius: 20px; object-fit: cover; flex: none; box-shadow: 0 0 0 4px var(--blauw-tint); }
.persoon--zzp .persoon__foto { box-shadow: 0 0 0 4px var(--paars-tint); }
.persoon__tag { display: inline-block; font-size: .75rem; font-weight: 600; padding: .25em .7em; border-radius: 999px; background: var(--blauw-tint); color: var(--blauw); margin-bottom: .45rem; }
.persoon--zzp .persoon__tag { background: var(--paars-tint); color: #4E2C8C; }
.persoon h3 { margin: 0 0 .1rem; font-size: 1.35rem; }
.persoon__rol { margin: 0; color: var(--grijs); font-size: .97rem; }
.persoon .vinklijst { margin: 0 0 1.2rem; }
.persoon__tak { margin: auto 0 .8rem; font-size: .85rem; color: var(--grijs-licht); }
.persoon__gaan { font-weight: 600; color: var(--blauw); text-decoration: none; }
.persoon--zzp .persoon__gaan { color: var(--paars); }
.persoon__gaan::after { content: " \2192"; }
.persoon__gaan:hover { text-decoration: underline; }
.personen__noot { max-width: 62ch; margin: 1.4rem 0 0; color: var(--grijs); font-size: .95rem; }

/* Wat u kunt verwachten, en klein daaronder wat wij niet doen. */
.belofte { padding-top: 1.2rem; border-top: 2px solid var(--lijn); }
.belofte__nr { font: 700 .85rem var(--kop); letter-spacing: .08em; color: var(--paars); }
.belofte h3 { margin: .5rem 0 .5rem; font-size: 1.2rem; }
.belofte p { color: var(--grijs); font-size: .97rem; margin: 0; max-width: 38ch; }
.belofte h3 { max-width: 24ch; }

.werkenbij { margin-top: clamp(1rem, 2vw, 1.4rem); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; background: var(--wit); border: 1px solid var(--lijn); border-radius: 20px; padding: clamp(1.4rem, 3vw, 2.2rem); }
.werkenbij h3 { margin: .7rem 0 .3rem; font-size: 1.3rem; }
.werkenbij p { margin: 0; color: var(--grijs); max-width: 52ch; }

@media (max-width: 900px) {
  .overkantoor, .personen { grid-template-columns: 1fr; }
  .feiten { border-left: 0; border-top: 1px solid var(--lijn); }
  .feiten div { padding-left: 0; }
}

/* ── Plekken voor eigen foto's ──────────────────────────────────────────── */
/* Tot er eigen beeld is: een rustig vlak met een afbeeldingsicoon. */
.beeld { margin: 0 0 1.2rem; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; }
.beeld--leeg {
  display: grid; place-content: center; justify-items: center; gap: .6rem; text-align: center; padding: 1.5rem;
  color: #8E9BB8; border: 1.5px dashed #C9D3E3;
  background: linear-gradient(160deg, var(--blauw-tint), var(--paars-tint));
}
.beeld--leeg svg { opacity: .8; }
.beeld--leeg figcaption { font-size: .85rem; font-weight: 600; color: #7A87A3; max-width: 26ch; }
.band { background: var(--wit); padding: 0 0 clamp(8px, 2vw, 24px); }
.band__beeld { margin: 0; border-radius: 22px; aspect-ratio: 1023 / 390; }
@media (max-width: 640px) { .band__beeld { aspect-ratio: 4 / 3; } }

/* ── Kennisbank ──────────────────────────────────────────────────────────
   Kaarten met de vraag als kop, en artikelen met het korte antwoord bovenaan
   in de kleur van de kant (paars zzp via .kant-zzp, blauw ondernemingen). */
.kenniskaart__label { align-self: flex-start; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blauw); }
.kenniskaart h3 { margin: .6rem 0 .5rem; font-size: 1.12rem; line-height: 1.3; text-wrap: balance; }
.artikel { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.artikel__tekst { max-width: 68ch; }
.artikel__tekst h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 2.2rem 0 .7rem; }
.artikel__tekst p { margin: 0 0 1rem; }
.artikel__tekst .vinklijst { margin: .4rem 0 1.2rem; }
.antwoord { background: var(--blauw-tint); border-left: 4px solid var(--blauw); border-radius: 0 var(--rond-klein) var(--rond-klein) 0; padding: 1.2rem 1.4rem; }
.antwoord__label { margin: 0 0 .35rem !important; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blauw); }
.antwoord p:last-child { margin: 0; font-size: 1.08rem; line-height: 1.6; color: var(--inkt); }
.artikel__bron { margin-top: 2.4rem !important; padding-top: 1rem; border-top: 1px solid var(--lijn); font-size: .86rem; color: var(--grijs-licht); }
.artikel__zij { position: sticky; top: 140px; display: grid; gap: 1rem; }
.artikel__zij .kaart h3 { margin: .5rem 0 .4rem; font-size: 1.05rem; }
.artikel__zij .kaart > h3:first-child { margin-top: 0; }
.artikel__lijst { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .1rem; }
.artikel__lijst a { display: block; padding: .5rem 0; border-top: 1px solid var(--lijn); color: var(--inkt); text-decoration: none; font-size: .93rem; line-height: 1.4; }
.artikel__lijst li:first-child a { border-top: 0; }
.artikel__lijst a:hover { color: var(--blauw); }
@media (max-width: 900px) {
  .artikel { grid-template-columns: 1fr; }
  .artikel__zij { position: static; }
}

/* ── Zzp-pagina ──────────────────────────────────────────────────────────
   Stappen met een nummer in de kantkleur, Alper met foto en het jaarwiel. */
.zzpstappen { list-style: none; counter-reset: stap; margin: 1.6rem 0; padding: 0; display: grid; gap: 1.1rem; }
.zzpstappen li { counter-increment: stap; display: grid; grid-template-columns: 40px 1fr; column-gap: 1rem; }
.zzpstappen li::before {
  content: counter(stap, decimal-leading-zero); grid-row: 1 / 3; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 11px; background: var(--blauw-tint); color: var(--blauw);
  font: 700 .9rem/1 var(--kop); font-variant-numeric: tabular-nums;
}
.zzpstappen strong { font-family: var(--kop); font-size: 1.05rem; padding-top: .45rem; }
.zzpstappen span { color: var(--grijs); font-size: .97rem; }
.zzpzij { display: grid; gap: 1.2rem; align-content: start; }
.zzpzij .lid { align-items: center; }
.zzpzij .lid__foto { width: 84px; height: 84px; box-shadow: 0 0 0 4px var(--blauw-tint); }
.lid__label { margin: 0 0 .2rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grijs-licht); }
.lid__bel { display: inline-flex; align-items: center; gap: .45rem; margin-top: .35rem; font-weight: 600; font-size: .95rem; color: var(--inkt); text-decoration: none; }
.lid__bel .icoon { color: var(--blauw); }
.lid__bel:hover { color: var(--blauw); }

.jaarwiel { margin: 0; padding: clamp(1.3rem, 2.4vw, 1.8rem); }
.jaarwiel__kop { font: 700 1.05rem var(--kop); margin-bottom: .4rem; }
.jaarwiel__svg { display: block; width: min(100%, 320px); height: auto; margin: 0 auto; }
.jaarwiel__ring { fill: none; stroke: var(--blauw-tint); stroke-width: 26; }
.jaarwiel__streep line { stroke: var(--wit); stroke-width: 2; }
.jaarwiel__cijfers { fill: none; stroke: var(--blauw); stroke-width: 26; stroke-linecap: round; opacity: .9; }
.jaarwiel__btw { fill: var(--wit); stroke: var(--blauw); stroke-width: 4; }
.jaarwiel__ib { fill: var(--inkt); stroke: var(--wit); stroke-width: 3; }
.jaarwiel__ib-lijn { fill: none; stroke: var(--inkt); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; opacity: .5; }
.jaarwiel__maand text { font: 700 12px var(--kop); fill: var(--grijs-licht); text-anchor: middle; }
.jaarwiel__midden { font: 700 22px var(--kop); fill: var(--inkt); text-anchor: middle; letter-spacing: -.02em; }
.jaarwiel__onder { font: 500 13px var(--tekst); fill: var(--grijs); text-anchor: middle; }
.jaarwiel__legenda { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .55rem; font-size: .9rem; color: var(--grijs); }
.jaarwiel__legenda li { display: flex; align-items: flex-start; gap: .7rem; line-height: 1.45; }
.lg { flex: none; width: 16px; height: 16px; margin-top: .15em; border-radius: 50%; }
.lg--ring { background: var(--blauw-tint); }
.lg--btw { background: var(--wit); border: 3px solid var(--blauw); }
.lg--cijfers { background: var(--blauw); border-radius: 5px; }
.lg--ib { background: var(--inkt); }
.zzpprijs .kaart h3 { margin-bottom: .8rem; }

/* Over DevAlp: de strook met de rest van het team onder Ismail en Alper. */
.teamstrook { display: flex; gap: 1rem; align-items: flex-start; margin-top: 1.2rem; padding: 1.2rem 1.4rem; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond); }
.teamstrook__icoon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--blauw-tint); color: var(--blauw); }
.teamstrook p { margin: 0; color: var(--grijs); }
.teamstrook strong { display: block; color: var(--inkt); font-family: var(--kop); font-size: 1.05rem; margin-bottom: .2rem; }

/* Rechterkolom even hoog als de tekst links: het wiel met de legenda ernaast
   (op een smalle kolom eronder), en de kaart vult de rest van de kolom. */
.zzpzij { grid-template-rows: auto 1fr; }
.tweeluik:has(> .zzpzij) { align-items: stretch; }
.jaarwiel { display: flex; flex-direction: column; }
/* de legenda onder het wiel (naast het wiel brak de tekst te veel af) */
.jaarwiel__binnen { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.jaarwiel__binnen .jaarwiel__svg { width: min(100%, 190px); margin-top: .2rem; }
.jaarwiel__binnen .jaarwiel__legenda { margin-top: .9rem; }
.ondvormen { margin-bottom: 1rem; }

/* Kaarten in een raster: de link "Dit aanvragen" of "Lees meer" staat altijd
   onderaan, op dezelfde hoogte als bij de buurkaarten. */
.raster > .kaart { display: flex; flex-direction: column; }
.raster > .kaart > .kaart__meer { margin-top: auto; padding-top: 1.2rem; }
.raster > .kaart > .kaart__nr { align-self: flex-start; }

/* Routekaarten op de voorpagina: drie punten en het aanspreekpunt met foto. */
.route__lijst { margin: .2rem 0 1.2rem; }
.route__lijst li { font-size: .96rem; }
.route--zzp .route__lijst li::before { border-color: var(--paars); }
.route--mkb .route__lijst li::before { border-color: var(--blauw); }
.route__foto { width: 48px; height: 48px; border-radius: 13px; object-fit: cover; flex: none; }

/* Werkwijze op de voorpagina: kop met knoppen en een tijdlijn van vier
   stappen over de volle breedte, met een lijn die ze verbindt. */
.werkkop { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(30px, 3.6vw, 46px); }
.werkkop .sectie__kop { margin-bottom: 0; }
.werkkop__knoppen { display: flex; gap: .8rem; flex-wrap: wrap; }
.tijdlijn { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; position: relative; }
.tijdlijn__stap:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: 56px; right: calc(-1.2rem + 12px); height: 2px; background: linear-gradient(90deg, var(--blauw), var(--paars)); opacity: .3; }
.tijdlijn__stap { position: relative; }
.tijdlijn__nr { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--verloop); color: #fff; font: 700 .95rem/1 var(--kop); box-shadow: 0 0 0 6px var(--wit); }
.tijdlijn__wanneer { display: block; margin: 1.1rem 0 .3rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--paars); }
.tijdlijn h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
.tijdlijn p { margin: 0; color: var(--grijs); font-size: .96rem; }
@media (max-width: 900px) {
  .tijdlijn { grid-template-columns: 1fr; gap: 1.6rem; }
  .tijdlijn__stap:not(:last-child)::after { top: 56px; bottom: calc(-1.6rem + 12px); left: 21px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--blauw), var(--paars)); }
  .tijdlijn__stap { padding-left: 64px; }
  .tijdlijn__nr { position: absolute; left: 0; top: 0; }
  .tijdlijn__wanneer { margin-top: .2rem; }
}

/* Salarispagina: kaart met IRS en DevAlp naast elkaar in plaats van een foto. */
.irskaart { margin-bottom: 1.2rem; }
.irskaart__kop { display: flex; align-items: center; justify-content: center; gap: 1.2rem; padding: 1.2rem 0 1rem; }
.irskaart__kop img { height: 46px; width: auto; }
.irskaart__kop img[src*="irs-logo"] { height: 58px; }
.irskaart__plus { font: 600 1.4rem var(--kop); color: var(--grijs-licht); }
.irskaart__adres { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: 0 0 1.2rem; font-size: .88rem; color: var(--grijs); }
.irskaart__adres .icoon { color: var(--blauw); }
.irskaart__raster { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.irskaart__kant { background: var(--blauw-tint); border-radius: var(--rond-klein); padding: 1rem 1.1rem; }
.irskaart__kant--irs { background: var(--grond); }
.irskaart__wie { margin: 0 0 .5rem; font: 700 .95rem var(--kop); color: var(--inkt); }
.irskaart__kant ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .9rem; color: var(--grijs); }
.irskaart__kant li::before { content: "\2022"; color: var(--blauw); margin-right: .45rem; }
.irskaart__link { display: inline-block; margin-top: 1.1rem; font-weight: 600; color: var(--blauw); text-decoration: none; }
.irskaart__link:hover { text-decoration: underline; }
@media (max-width: 480px) { .irskaart__raster { grid-template-columns: 1fr; } }

/* Kennisbank: zoekveld, onderwerptegels en de stand van de zoekopdracht. */
.kenniszoek { max-width: 680px; margin: 0 auto 2rem; }
.kenniszoek__veld { position: relative; display: block; }
.kenniszoek__veld > .icoon { position: absolute; left: 1.2rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--grijs-licht); pointer-events: none; }
.kenniszoek input {
  width: 100%; font: 400 1.05rem var(--tekst); color: var(--inkt); background: var(--wit);
  border: 1.5px solid var(--lijn); border-radius: 999px; padding: 1.05rem 3.2rem 1.05rem 3.3rem;
  box-shadow: var(--schaduw); transition: border-color .15s, box-shadow .15s;
}
.kenniszoek input::-webkit-search-cancel-button { display: none; }
.kenniszoek input:focus { outline: none; border-color: var(--blauw); box-shadow: 0 0 0 4px rgba(15,80,150,.12); }
.kenniszoek__wis { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--grijs); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.kenniszoek__wis:hover { background: var(--grond); color: var(--inkt); }
.kennistegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2.2rem; }
.kennistegel {
  display: grid; justify-items: start; gap: .2rem; text-align: left; cursor: pointer; padding: 1.1rem 1.2rem;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond); color: var(--inkt);
  font: inherit; transition: transform .18s var(--zacht), box-shadow .18s, background .18s;
}
.kennistegel:hover { transform: translateY(-2px); box-shadow: var(--schaduw-op); }
.kennistegel__icoon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--blauw-tint); color: var(--blauw); margin-bottom: .5rem; }
.kennistegel__naam { font: 700 1rem var(--kop); }
.kennistegel__bij { font-size: .86rem; color: var(--grijs); line-height: 1.4; }
.kennistegel__aantal { margin-top: .4rem; font-size: .84rem; font-weight: 600; color: var(--blauw); }
.kennistegel[aria-pressed="true"] { background: var(--verloop); border-color: transparent; color: #fff; box-shadow: 0 14px 30px -18px rgba(15,80,150,.9); }
.kennistegel[aria-pressed="true"] .kennistegel__icoon { background: rgba(255,255,255,.2); color: #fff; }
.kennistegel[aria-pressed="true"] .kennistegel__bij, .kennistegel[aria-pressed="true"] .kennistegel__aantal { color: rgba(255,255,255,.85); }
.kennisstand { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.kennisstand__tekst { margin: 0; font: 700 1.1rem var(--kop); }
.kennisstand__alles { border: 0; background: none; font: 600 .95rem var(--tekst); color: var(--blauw); cursor: pointer; }
.kennisraster .kenniskaart[hidden] { display: none; }
.kennisleeg { text-align: center; padding: 2.4rem; }
.kennisleeg p { max-width: 46ch; margin: .6rem auto 0; color: var(--grijs); }
@media (max-width: 900px) {
  .kennistegels { grid-template-columns: 1fr 1fr; }
  .kennistegel__bij { display: none; }
}
.irskaart__feiten { list-style: none; margin: 0 0 1.1rem; padding: .9rem 0; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.irskaart__feiten li + li { border-left: 1px solid var(--lijn); }
.irskaart__feiten strong { display: block; font: 700 1.25rem/1.2 var(--kop); color: var(--blauw); }
.irskaart__feiten span { font-size: .82rem; color: var(--grijs); }

/* Labels zonder gespatieerde hoofdletters: die vond Odelin slordig staan
   (2026-10-04). Nu in de kopletter, gewone schrijfwijze, iets zwaarder. */
.oog, .ingang__tekst em, table.vergelijk thead th, .uitslag__label, .keuzelijst__groep,
.voet__tijdenkop, .zaak em, .gegevens__lijst span, .kenniskaart__label, .antwoord__label,
.lid__label, .tijdlijn__wanneer {
  text-transform: none; letter-spacing: -.005em; font-family: var(--kop); font-weight: 600;
}
.oog { font-size: .95rem; }
.ingang__tekst em, .zaak em, .kenniskaart__label, .lid__label, .tijdlijn__wanneer,
.uitslag__label, .antwoord__label { font-size: .88rem; }
.keuzelijst__groep, .gegevens__lijst span, table.vergelijk thead th { font-size: .84rem; }
.voet__tijdenkop { font-size: .9rem; color: #fff; }

/* Tijdlijn, altijd gevuld. Het vullen bij het scrollen is er sinds ronde 3
   (2026-10-21) uit op verzoek van DevAlp. De lijn is een lichte baan
   (::before) met de vulling in het verloop (::after) erover. */
.tijdlijn__stap { --vul: 1; }
.tijdlijn__stap:not(:last-child)::before {
  content: ""; position: absolute; top: 21px; left: 56px; right: calc(-1.2rem + 12px); height: 2px;
  background: var(--lijn); border-radius: 2px;
}
.tijdlijn__stap:not(:last-child)::after {
  opacity: 1; transform-origin: left center; transform: scaleX(var(--vul)); border-radius: 2px;
}
@media (max-width: 900px) {
  .tijdlijn__stap:not(:last-child)::before { top: 56px; bottom: calc(-1.6rem + 12px); left: 21px; right: auto; width: 2px; height: auto; }
  .tijdlijn__stap:not(:last-child)::after { transform-origin: center top; transform: scaleY(var(--vul)); }
}

/* Voor zzp'ers licht in het menu op in het lichte paars van de zzp-kant. */
.menu > a[href="zzp.html"][aria-current="page"] { background: var(--paars-tint); color: var(--paars); }
.menu > a[href="zzp.html"]:not(.knop):hover { color: var(--paars); }

/* Vacature: feiten en solliciteerknop rechts, blijft in beeld op desktop. */
.vacaturezij { display: grid; gap: 1rem; align-content: start; position: sticky; top: 140px; }
.vacaturekaart h3 { margin-bottom: .8rem; }
.vacaturekaart__feiten { margin: 0 0 1.2rem; display: grid; gap: .6rem; }
.vacaturekaart__feiten div { display: grid; grid-template-columns: 90px 1fr; gap: .8rem; font-size: .95rem; padding-bottom: .6rem; border-bottom: 1px solid var(--lijn); }
.vacaturekaart__feiten dt { color: var(--grijs); }
.vacaturekaart__feiten dd { margin: 0; font-weight: 600; }
.vacaturekaart .klein { margin: .8rem 0 0; color: var(--grijs); }
@media (max-width: 900px) { .vacaturezij { position: static; } }

/* Dienstenpaneel: de zzp-kolom in paars, de voet rustig. Spoed is een gewone
   link met een bliksem in plaats van een gekleurd vlak, en "Doe de keuzehulp"
   staat er niet meer bij, want dat is al de knop in de menubalk. */
.menu__groep--paars .menu__groepkop { color: var(--paars); }
.menu__groep:not(.menu__groep--paars) .menu__groepkop { color: var(--blauw); }
.balk .menu__groep--paars li a:hover, .balk .menu__groep--paars li a[aria-current="page"] { background: var(--paars-tint); color: var(--paars); }
.menu__paneelvoet a.menu__uitgelicht { background: none; padding: .3rem .6rem; color: var(--inkt); font-weight: 600; }
.menu__paneelvoet a.menu__uitgelicht .icoon { color: var(--paars); }
.menu__paneelvoet a.menu__uitgelicht:hover { background: none; color: var(--paars); text-decoration: underline; }
.menu__paneellinks a:first-child { color: var(--blauw); }

/* Over DevAlp: de foto van het pand (dezelfde als op de site van IRS, het is
   hetzelfde gebouw). */
.band__beeld--foto { position: relative; overflow: hidden; }
.band__beeld--foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.band__beeld--foto figcaption { position: absolute; left: 1.2rem; bottom: 1.2rem; padding: .45rem .9rem; border-radius: 999px; background: rgba(255,255,255,.9); font: 600 .88rem var(--kop); color: var(--inkt); }

/* Dienstpagina's: infographics in plaats van lege fotoplekken. */
.onderwerpzij .kaart:last-child { flex: 1; }
.kalender__lijst { list-style: none; margin: .4rem 0 1rem; padding: 0; display: grid; gap: .1rem; }
.kalender__rij { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: .9rem; padding: .55rem 0; border-bottom: 1px solid var(--lijn); position: relative; }
.kalender__rij:last-child { border-bottom: 0; }
.kalender__datum { justify-self: start; padding: .3rem .55rem; border-radius: 8px; font: 700 .86rem/1 var(--kop); font-variant-numeric: tabular-nums; background: var(--blauw-tint); color: var(--blauw); }
.kalender__rij--ib .kalender__datum { background: var(--paars-tint); color: var(--paars); }
.kalender__rij--vpb .kalender__datum { background: var(--inkt); color: #fff; }
.kalender__wat { font-size: .95rem; color: var(--inkt); }
.kalender__legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .85rem; color: var(--grijs); }
.kalender__legenda li { display: inline-flex; align-items: center; gap: .45rem; }
.kalender__stip { width: 11px; height: 11px; border-radius: 3px; background: var(--blauw); }
.kalender__stip--ib { background: var(--paars); }
.kalender__stip--vpb { background: var(--inkt); }
.kalender__noot { margin: .9rem 0 0; font-size: .86rem; color: var(--grijs); }
.kant-zzp .kalender__rij--btw .kalender__datum { background: #EAF1FA; color: #0F5096; }
.kant-zzp .kalender__stip--btw { background: #0F5096; }
.momenten__lijst { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: 1rem; position: relative; }
.momenten__lijst::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(180deg, var(--blauw), var(--paars)); opacity: .3; }
.momenten__rij { display: grid; grid-template-columns: 44px 1fr; gap: .9rem; align-items: center; position: relative; }
.momenten__icoon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--wit); border: 1.5px solid var(--blauw-tint); color: var(--blauw); box-shadow: 0 0 0 5px var(--wit); }
.momenten__rij:nth-child(even) .momenten__icoon { color: var(--paars); border-color: var(--paars-tint); }
.momenten__rij strong { display: block; font: 700 1rem var(--kop); }
.momenten__rij span { font-size: .92rem; color: var(--grijs); }
.kalender, .momenten { margin: 0; display: flex; flex-direction: column; }
.momenten__lijst { flex: 1; align-content: space-evenly; }
.kalender__lijst { flex: 1; align-content: center; }

/* Dienstpagina's zonder persoonskaart: infographic en uitleg rechts, samen
   even hoog als de tekst links. */
.tweeluik:has(> .onderwerpzij) { align-items: stretch; }
.onderwerpzij { display: flex; flex-direction: column; gap: 1.2rem; }
.onderwerpzij > .kaart:first-child { flex: 1; }
.onderwerpzij__uitleg h3 { margin-bottom: .5rem; }
.onderwerpzij__uitleg p { font-size: .95rem; color: var(--grijs); margin: 0 0 .6rem; }
.onderwerpzij__uitleg p:last-child { margin-bottom: 0; }
.onderwerpzij .irskaart { margin-bottom: 0; }
.onderwerpzij__uitleg h3 { margin-top: 0; }
.onderwerpzij .kalender__rij { padding: .42rem 0; }
.onderwerpzij .kalender__noot { margin-top: .6rem; }
.onderwerpzij .irskaart__kop { padding-top: .4rem; }
.onderwerpzij .momenten__lijst { gap: .75rem; }
.onderwerpzij .kalender__lijst { align-content: space-between; margin: .5rem 0 .9rem; }
.onderwerpzij .kalender__rij { padding: .38rem 0; }
.onderwerpzij .irskaart__kop { padding-bottom: .8rem; }
.onderwerpzij .irskaart__feiten { margin-bottom: .9rem; padding: .7rem 0; }
.onderwerpzij .irskaart__link { margin-top: .8rem; }

/* ── Voet, opnieuw ingedeeld (2026-10-04) ────────────────────────────────
   Boven het merk met knoppen, dan vier kolommen, dan de wettelijke regel. */
.voet__boven { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-bottom: 2.2rem; margin-bottom: 2.4rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.voet__merkblok { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.voet__merkblok .voet__merk { margin: 0; }
.voet__merkblok p { margin: 0; max-width: 34ch; color: rgba(255,255,255,.7); }
.voet__knoppen { display: flex; gap: .7rem; flex-wrap: wrap; }
.voet__knoppen .knop { padding: .85rem 1.2rem; font-size: .95rem; }
.voet__knoppen .knop .icoon { width: 16px; height: 16px; }
.voet .voet__raam { grid-template-columns: 1fr 1fr 1fr 1.25fr; gap: 2rem; }
.voet__kolom h4 { margin-bottom: 1rem; }
.voet__kolom ul { gap: .6rem; }
.voet__teller { display: inline-block; margin-left: .35rem; padding: .1em .55em; border-radius: 999px; background: var(--paars); color: #fff; font-size: .74rem; font-weight: 600; vertical-align: 1px; }
.voet__contact li { align-items: flex-start; }
.voet__contact .icoon { margin-top: .25em; }
.voet__slot { margin-top: 2.6rem; }
.voet__slot > span:first-child { color: rgba(255,255,255,.55); }
.voet__juridisch { color: rgba(255,255,255,.55); }
.voet .voet__noot { margin: .9rem 0 0; font-size: .82rem; color: rgba(255,255,255,.4); }
@media (max-width: 900px) {
  .voet .voet__raam { grid-template-columns: 1fr 1fr; }
  .voet__boven { align-items: flex-start; }
}
@media (max-width: 520px) {
  .voet .voet__raam { grid-template-columns: 1fr; }
  .voet__knoppen .knop { flex: 1; }
}
/* Werken bij */
.werkenbieden .kaart h3 { margin: .8rem 0 .3rem; font-size: 1.05rem; }
.werkenbieden .kaart p { margin: 0; color: var(--grijs); font-size: .95rem; }
.vacaturelijst__kaart h3 { margin: .5rem 0 .4rem; }
.vacaturelijst__salaris { display: block; margin-top: .6rem; font-weight: 600; color: var(--inkt); font-size: .95rem; }
.vacaturelijst__leeg { text-align: center; padding: clamp(2rem, 5vw, 3.4rem); max-width: 720px; margin: 0 auto; }
.vacaturelijst__leeg p { max-width: 52ch; margin: .6rem auto 1.4rem; color: var(--grijs); }
.vacature__terug { font-weight: 600; color: var(--blauw); text-decoration: none; font-size: .95rem; }


/* IRS-kaart: alleen het IRS-logo, links, met een label erboven. */
.irskaart .irskaart__kop { display: block; padding: 0 0 1rem; }
.irskaart__label { margin: 0 0 .7rem; font: 600 .88rem var(--kop); color: var(--grijs); }
.irskaart .irskaart__kop img { display: block; height: 48px; width: auto; }
.irskaart__label { margin-bottom: .35rem; }
.irskaart .irskaart__kop { padding-bottom: .5rem; }
.irskaart .irskaart__kop img { height: 64px; margin-left: -10px; }


/* Werkwijze: het jaar in vier kwartaalkaarten met de deadlines als labels. */
.kwartaal { display: flex; flex-direction: column; }
.kwartaal__kop { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .8rem; }
.kwartaal__q { font: 700 1.6rem/1 var(--kop); background: var(--verloop); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kwartaal__maanden { font: 600 .9rem var(--kop); color: var(--grijs); }
.kwartaal__chips { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { padding: .25em .65em; border-radius: 999px; font: 600 .78rem var(--kop); background: var(--blauw-tint); color: var(--blauw); }
.chip--ib { background: var(--paars-tint); color: var(--paars); }
.chip--vpb { background: var(--inkt); color: #fff; }
.kwartaal p { margin: 0; color: var(--grijs); font-size: .95rem; }


/* Voet: de toppen uit het logo als watermerk rechtsonder, half uit beeld. */
.voet { position: relative; overflow: hidden; }
.voet > .omhulsel { position: relative; z-index: 1; }
.voet::after {
  content: ""; position: absolute; right: -4%; bottom: -5%; width: min(44vw, 600px); aspect-ratio: 306 / 100;
  background: linear-gradient(120deg, #fff, var(--paars-licht)); opacity: .06; pointer-events: none;
  -webkit-mask: url("../img/teken.svg") center / contain no-repeat; mask: url("../img/teken.svg") center / contain no-repeat;
}

/* Dienstkaarten naast elkaar: met subgrid staan kop, uitleg, prijs, lijst en
   link in alle kaarten van een rij op dezelfde hoogte. */
.dienstraster > .kaart { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.dienstraster > .kaart > .kaart__meer { align-self: end; }

/* Keuzehulp midden op een pagina: kop links, uitleg rechts, minder hoogte. */
.wijzerkop { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem clamp(2rem, 5vw, 4rem); align-items: end; margin-bottom: clamp(22px, 2.6vw, 34px); }
.wijzerkop h2 { margin: 0; max-width: 18ch; }
.wijzerkop .lead { margin: 0; }
@media (max-width: 860px) { .wijzerkop { grid-template-columns: 1fr; } }
.wijzerkop { grid-template-columns: 1.3fr 1fr; }
.wijzerkop h2 { max-width: none; font-size: clamp(1.7rem, 2.6vw, 2.3rem); text-wrap: balance; }
#keuzehulp.berg-rand { --pad-boven: clamp(36px, 4vw, 56px); padding-bottom: clamp(48px, 6vw, 80px); }

.voorwaardenkaart { padding: clamp(1.6rem, 4vw, 2.6rem); }
.voorwaardenkaart h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: .8rem; }
.voorwaardenkaart p { color: var(--grijs); }
.voorwaardenkaart__knoppen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }

/* Icoontjes in de uitklappanelen: klein vlakje in de kleur van de kolom. */
.menu__paneel li a { display: flex; align-items: center; gap: .65rem; }
.menu__paneel li a .icoon { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: var(--blauw-tint); color: var(--blauw); transition: background .14s, color .14s; }
.menu__groep--paars li a .icoon { background: var(--paars-tint); color: var(--paars); }
.balk .menu__paneel li a:hover .icoon { background: var(--wit); }

/* Op de zzp-pagina ook de lichte achtergrond in paars in plaats van blauwgrijs,
   en de keuzehulp valt er nu ook onder. */
.kant-zzp { --grond: #F7F3FD; }
.kant-zzp .sectie:not(.sectie--wit) { background: var(--grond); }

/* Voet: links kleuren lichtpaars bij aanwijzen in plaats van alleen een
   onderstreping, en de huidige pagina staat wit en vet met een stipje. */
.voet a:hover { color: var(--paars-licht); text-decoration: none; }
.voet__kolom a { transition: color .15s; }
.voet__kolom a[aria-current="page"] { color: #fff; font-weight: 600; }
.voet__kolom a[aria-current="page"]::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 .5rem 2px 0; border-radius: 50%; background: var(--paars-licht); }
.voet__slot a:hover, .voet__slot .voet__credit:hover { color: var(--paars-licht); }

/* Algemene voorwaarden: inhoud links (meescrollend), tekst rechts. */
.voorwaarden { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.voorwaarden__zij { position: sticky; top: 140px; display: grid; gap: 1rem; }
.voorwaarden__zij .kaart h3 { margin: 0 0 .5rem; font-size: 1rem; }
.voorwaarden__zij .kaart p { font-size: .9rem; color: var(--grijs); margin: 0 0 .4rem; }
.voorwaarden__inhoud ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; max-height: 46vh; overflow-y: auto; }
.voorwaarden__inhoud a { display: block; padding: .3rem 0; font-size: .88rem; color: var(--grijs); text-decoration: none; }
.voorwaarden__inhoud a:hover { color: var(--blauw); }
.voorwaarden__tekst { max-width: 72ch; }
.voorwaarden__tekst h2 { font-size: 1.25rem; margin: 2.2rem 0 .8rem; scroll-margin-top: 140px; }
.voorwaarden__tekst h2:first-child { margin-top: 0; }
.voorwaarden__tekst h2 span { display: block; font: 600 .85rem var(--kop); color: var(--blauw); margin-bottom: .2rem; }
.voorwaarden__tekst p, .voorwaarden__leden { color: var(--inkt); font-size: .98rem; line-height: 1.7; }
.voorwaarden__leden { margin: 0 0 1rem; padding-left: 1.6rem; display: grid; gap: .6rem; }
.voorwaarden__leden li::marker { color: var(--blauw); font-weight: 600; }
.voorwaarden__sub { margin: .5rem 0 0; padding-left: 1.2rem; display: grid; gap: .35rem; list-style: disc; }
@media (max-width: 900px) { .voorwaarden { grid-template-columns: 1fr; } .voorwaarden__zij { position: static; } }
/* Bij aanwijzen of op de huidige pagina geen wit vlak om het icoontje, maar een
   iets donkerdere tint, zodat er geen dikke witte rand ontstaat. */
.balk .menu__paneel li a:hover .icoon, .balk .menu__paneel li a[aria-current="page"] .icoon { background: rgba(15,80,150,.12); }
.balk .menu__groep--paars li a:hover .icoon, .balk .menu__groep--paars li a[aria-current="page"] .icoon { background: rgba(106,63,181,.14); }
/* Uitklappaneel: minder witruimte rondom, en de items lopen breder door zodat
   de lichte vlakken bij aanwijzen de kolom vullen. Items zelf zoals ze waren. */
@media (min-width: 1061px) {
  .balk .menu__paneel { padding: .7rem; }
  .balk .menu__paneelrij { gap: .4rem; }
  .balk .menu__groep { min-width: 250px; }
  .balk .menu__groep + .menu__groep { padding-left: .4rem; }
  .balk .menu__paneel li a { padding: .5rem .8rem .5rem .55rem; }
  .balk .menu__groepkop { margin: .35rem .55rem .35rem; }
  .balk .menu__paneelvoet { margin-top: .5rem; padding-top: .6rem; }
}

/* Knop naar boven, rechtsonder op elke pagina zodra u een stuk gescrold heeft. */
.naarboven {
  position: fixed; right: clamp(14px, 2.4vw, 28px); bottom: clamp(14px, 2.4vw, 28px); z-index: 90;
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: var(--verloop); color: #fff; box-shadow: 0 12px 28px -10px rgba(15,40,90,.55);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s, transform .25s var(--zacht), visibility .25s;
}
.naarboven.is-zichtbaar { opacity: 1; visibility: visible; transform: none; }
.naarboven:hover { color: #fff; transform: translateY(-2px); }
@media print { .naarboven { display: none; } }

/* Algemene voorwaarden: de zijkolom past altijd in beeld en scrollt zelf als
   hij te lang is; geen aparte scrollbalk meer in de inhoudsopgave. */
.voorwaarden__zij { max-height: calc(100vh - 160px); overflow-y: auto; overscroll-behavior: contain; }
.voorwaarden__inhoud ol { max-height: none; overflow: visible; }
.voorwaarden__intro { padding: 1rem 1.2rem; background: var(--grond); border-radius: var(--rond-klein); font-size: .92rem; color: var(--grijs) !important; margin-bottom: 2rem !important; }
@media (max-width: 900px) { .voorwaarden__zij { max-height: none; overflow: visible; } }
.voorwaarden__tekst h2 { scroll-margin-top: 24px; }
.voorwaarden__inhoud a { padding: .18rem 0; line-height: 1.35; }
.voorwaarden__inhoud a:hover, .voorwaarden__inhoud a.is-hier { color: var(--blauw); font-weight: 600; }

/* Leesvoortgang onder het menu, in het verloop. */
.leesvoortgang { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--verloop); transform-origin: left center; transform: scaleX(0); pointer-events: none; z-index: 2; }

/* Scrollbalk in de huisstijl (Chrome, Safari, Edge en Firefox). */
html { scrollbar-color: #8A73C9 #EEF1F7; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #EEF1F7; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--blauw), var(--paars)); border-radius: 999px; border: 3px solid #EEF1F7; }
::-webkit-scrollbar-thumb:hover { border-width: 2px; }

/* Aanvraag: de rechterkolom scrollt mee naast het formulier. */

/* ── Mobiel (2026-10-04) ─────────────────────────────────────────────────── */
.menu__extra { display: none; }
@media (max-width: 1060px) {
  /* Het menu vult het hele scherm onder de kopbalk. */
  .menu { inset: 76px 0 0; max-height: none; height: calc(100dvh - 76px); padding: .4rem 1.2rem calc(1.4rem + env(safe-area-inset-bottom)); border-bottom: 0; box-shadow: none; }
  .menu--open { display: flex; }
  .menu > a, .menu__knop { font: 600 1.15rem var(--kop); padding: .95rem .2rem; }
  .menu__tel { display: none !important; }
  .menu__extra { display: block; margin-top: 1.2rem; }
  .menu__extrakop { margin: 0 0 .6rem .2rem; font: 600 .85rem var(--kop); color: var(--grijs-licht); }
  .menu__tegels { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .menu__tegels a { display: flex; align-items: center; gap: .6rem; padding: .8rem .85rem; border-radius: var(--rond-klein); background: var(--grond); color: var(--inkt); font-weight: 600; font-size: .95rem; text-decoration: none; }
  .menu__tegels a .icoon { width: 20px; height: 20px; color: var(--blauw); flex: none; }
  .menu__contact { display: grid; gap: .3rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--lijn); }
  .menu__contact a { display: flex; align-items: center; gap: .6rem; padding: .45rem .2rem; color: var(--inkt); text-decoration: none; font-weight: 600; }
  .menu__contact .icoon { color: var(--paars); }
  .menu > .knop { margin-top: auto; }
  body:has(.menu--open) { overflow: hidden; }
  body:has(.menu--open) .naarboven { display: none; }
}

/* Keuzehulp-kop: op mobiel onder elkaar (de regel hierboven overschreef dat). */
@media (max-width: 860px) {
  .wijzerkop { grid-template-columns: 1fr; gap: .6rem; }
  .wijzerkop h2 { font-size: clamp(1.6rem, 7vw, 2rem); }
}

/* Usp's in de hero: op mobiel compact, kop en tekst naast elkaar per regel. */
@media (max-width: 780px) {
  .usps { gap: 0; padding: 1.1rem 0 1.6rem; }
  .usp { display: grid; grid-template-columns: 7.2rem 1fr; gap: .8rem; padding: .7rem 0; }
  .usp + .usp { border-top: 1px solid rgba(255,255,255,.14); }
  .usp strong { font-size: .98rem; }
  .usp span { font-size: .88rem; line-height: 1.45; }
}

/* Voet op mobiel: korter, kolommen twee aan twee. */
@media (max-width: 900px) {
  .voet .voet__raam { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.2rem; }
}
@media (max-width: 520px) {
  .voet { padding-top: 2.4rem; }
  .voet__boven { padding-bottom: 1.4rem; margin-bottom: 1.6rem; }
  .voet__merkblok p { display: none; }
  .voet .voet__raam { grid-template-columns: 1fr 1fr; }
  .voet__contactkolom { grid-column: 1 / -1; }
  .voet__kolom h4 { margin-bottom: .6rem; font-size: .92rem; }
  .voet__kolom ul { gap: .35rem; font-size: .9rem; }
  .voet__slot { margin-top: 1.6rem; flex-direction: column; align-items: flex-start; gap: .4rem; }
  .voet__slot .voet__credit { margin-left: 0; }
}
@media (max-width: 1060px) {
  .menu { height: calc(100dvh - 114px); overflow-y: auto; }
  .menu__tegels a { font-size: .9rem; line-height: 1.25; }
}
@media (max-width: 520px) {
  .voet__kolom:nth-child(3) { grid-column: 1 / -1; }
  .voet__kolom:nth-child(3) ul { display: block; columns: 2; column-gap: 1.2rem; }
  .voet__kolom:nth-child(3) li { margin-bottom: .35rem; break-inside: avoid; }
  .voet__contactkolom { display: grid; grid-template-columns: 1.35fr 1fr; column-gap: 1rem; align-items: start; }
  .voet__contactkolom > h4:first-child { grid-column: 1 / -1; }
  .voet__contactkolom .voet__contact { grid-column: 1; grid-row: 2 / 4; }
  .voet__contactkolom .voet__kop2 { grid-column: 2; grid-row: 2; margin-top: 0; }
  .voet__contactkolom .voet__kop2 + ul { grid-column: 2; grid-row: 3; }
}
@media (max-width: 520px) {
  .voet__contactkolom { display: block; }
  .voet__contactkolom .voet__kop2 { margin-top: 1.4rem; }
  .voet__contactkolom .voet__kop2 + ul { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }
}

/* Plaatspagina's */
.plaats__knoppen { display: flex; flex-wrap: wrap; gap: .8rem; }
.plaats__zij { display: grid; gap: 1rem; align-content: start; }
.plaats__zij .kaart h3 { margin-top: 0; }
.plaats__zij .kaart p { color: var(--grijs); margin: 0 0 .6rem; }
.voet__regio { color: rgba(255,255,255,.45); font-size: .85rem; }
.voet__regio a { color: rgba(255,255,255,.55); }

/* ── Mobiel, tweede ronde ───────────────────────────────────────────────── */
@media (max-width: 520px) {
  /* Kantoor in de voet: eigen blok met de links als labels, zodat ze niet
     onder Voor ondernemingen lijken te vallen. */
  .voet__kolom:nth-child(3) ul { columns: auto; display: flex; flex-wrap: wrap; gap: .45rem; }
  .voet__kolom:nth-child(3) li { margin: 0; }
  .voet__kolom:nth-child(3) a { display: inline-flex; align-items: center; padding: .38rem .75rem; border-radius: 999px; background: rgba(255,255,255,.07); font-size: .88rem; }
  .voet__kolom:nth-child(3) a[aria-current="page"]::before { margin-left: 0; }
  .voet__kolom:nth-child(3) .voet__teller { margin-left: .4rem; }
}
@media (max-width: 1060px) {
  /* Mobiel menu: grond in licht blauwgrijs, items als afgeronde kaarten. */
  .menu { background: var(--grond); gap: .45rem; padding-top: 1rem; }
  .menu > a:not(.knop), .menu__uitklap { background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; }
  .menu > a:not(.knop), .menu__knop { border-bottom: 0 !important; padding: .9rem 1rem; font-size: 1.08rem; }
  .menu > a:not(.knop) { display: flex; align-items: center; justify-content: space-between; }
  .menu > a:not(.knop)::after { content: ""; width: 7px; height: 7px; border-top: 2px solid var(--grijs-licht); border-right: 2px solid var(--grijs-licht); transform: rotate(45deg); margin-right: .3rem; }
  .menu > a[aria-current="page"] { border-color: var(--blauw-tint); background: var(--blauw-tint); color: var(--blauw); }
  .menu > a[href="zzp.html"][aria-current="page"] { background: var(--paars-tint); border-color: var(--paars-tint); color: var(--paars); }
  .menu__uitklap { overflow: hidden; }
  .menu__knop + .menu__pijl { top: 50%; transform: translateY(-50%); right: .4rem; }
  .menu__uitklap[data-open="true"] .menu__pijl { transform: translateY(-50%); }
  .menu__uitklap[data-open="true"] > .menu__paneel { padding: 0 .6rem .7rem; }
  .menu__uitklap .menu__paneel li a { border-radius: 10px; }
  .menu__extra { margin-top: .9rem; }
  .menu__tegels a { background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; }
  .menu__contact { border-top: 0; margin-top: .6rem; padding-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
  .menu__contact a { justify-content: center; padding: .8rem .6rem; background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; font-size: .9rem; }
  .menu__contact a:last-child { font-size: .85rem; }
  .menu > .knop { border-radius: 14px; margin-top: auto; padding: 1rem; }
}
/* Vergelijkingstabel: nu drie kolommen, past op mobiel zonder zijwaarts scrollen. */
.tabelraam { overflow-x: auto; max-width: 100%; }
@media (max-width: 600px) {
  table.vergelijk { min-width: 0; width: 100%; font-size: .85rem; }
  table.vergelijk th, table.vergelijk td { padding: .6rem .5rem; }
  table.vergelijk thead th { font-size: .78rem; }
}
/* Mobiel menu: kaarten niet laten krimpen als een paneel openklapt. */
@media (max-width: 1060px) {
  .menu > * { flex-shrink: 0; }
}
.voet__regio a { white-space: nowrap; }

/* Aanvraag: de antwoorden uit de keuzehulp als vaste labels boven het formulier. */
.keuzeoverzicht { padding: 1rem 1.1rem; border-radius: var(--rond-klein); background: var(--blauw-tint); }
.keuzeoverzicht__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .7rem; }
.keuzeoverzicht__kop p { margin: 0; font: 600 .92rem var(--kop); color: var(--inkt); }
.keuzeoverzicht__kop a { font-size: .86rem; font-weight: 600; color: var(--blauw); text-decoration: none; white-space: nowrap; }
.keuzeoverzicht__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.keuzeoverzicht__lijst li { display: inline-flex; align-items: baseline; gap: .35rem; padding: .35rem .7rem; border-radius: 999px; background: var(--wit); border: 1px solid rgba(15,80,150,.15); font-size: .86rem; }
.keuzeoverzicht__lijst span { color: var(--grijs); }
.keuzeoverzicht__lijst strong { color: var(--inkt); font-weight: 600; }

/* Mobiel menu, derde ronde: geen kaarten om elk item. Een rustige lijst op wit
   met dunne lijnen; alleen de huidige pagina krijgt een afgerond vlak. Onder
   "Meer" gewone regels met een icoon, zonder kader. */
@media (max-width: 1060px) {
  .menu { background: var(--wit); gap: 0; }
  .menu > a:not(.knop), .menu__uitklap { background: none; border: 0; border-bottom: 1px solid var(--lijn); border-radius: 0; }
  .menu > a:not(.knop)::after { display: none; }
  .menu > a[aria-current="page"], .menu > a[href="zzp.html"][aria-current="page"] { border-radius: 12px; border-bottom-color: transparent; margin-bottom: 1px; }
  .menu > a[aria-current="page"] { background: var(--blauw-tint); }
  .menu > a[href="zzp.html"][aria-current="page"] { background: var(--paars-tint); }
  .menu__uitklap:has(.menu__knop[aria-current="page"]) .menu__knop { color: var(--blauw); }
  .menu__extra { margin-top: 1.4rem; }
  .menu__tegels { gap: .1rem 1rem; }
  .menu__tegels a { background: none; border: 0; border-radius: 10px; padding: .65rem .3rem; }
  .menu__tegels a[aria-current="page"] { background: var(--grond); }
}
@media (max-width: 1060px) {
  .menu > a:not(.knop) { border-bottom: 1px solid var(--lijn) !important; }
  .menu > a[aria-current="page"] { border-bottom-color: transparent !important; }
  .menu__uitklap .menu__knop { border-bottom: 0 !important; }
}

/* Mobiel menu zoals bij Taurus: geen lijnen, elk item een afgerond vlak dat
   alleen kleurt als het de huidige pagina is; boven de Keuzehulp twee knoppen
   voor bellen en mailen. */
.menu__bellen { display: none; }
@media (max-width: 1060px) {
  .menu { gap: .15rem; padding-top: .8rem; }
  .menu > a:not(.knop), .menu__uitklap { border: 0 !important; border-radius: 12px; }
  .menu > a:not(.knop), .menu__knop { padding: .85rem 1rem; font-size: 1.05rem; border-radius: 12px; }
  .menu > a:not(.knop):active, .menu__knop:active { background: var(--grond); }
  .menu > a[aria-current="page"] { margin-bottom: 0; }
  .menu__uitklap:has(.menu__knop[aria-current="page"]) { background: var(--blauw-tint); }
  .menu__knop + .menu__pijl { top: 5px; transform: none; right: .4rem; }
  .menu__uitklap[data-open="true"] .menu__pijl { transform: none; }
  .menu__extra { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--lijn); }
  .menu__extrakop { margin-left: 1rem; }
  .menu__tegels a { padding: .65rem 1rem; }
  .menu__bellen { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: auto; padding-top: 1.2rem; }
  .menu__bellen .knop { padding: .9rem .6rem; border-radius: 12px; font-size: .98rem; }
  .menu__bellen .icoon { width: 18px; height: 18px; }
  .menu > .knop { margin-top: .6rem; }
}

/* Voet, mobiel, opnieuw: twee kolommen per rij (zzp | ondernemingen,
   kantoor | juridisch), contact over de volle breedte, en de wettelijke regel
   op twee rustige regels. Op desktop blijft alles zoals het was. */
.voet__wettelijk { display: inline-flex; flex-wrap: wrap; gap: 0 .5rem; }
.voet__wettelijk > span + span::before { content: "\00b7"; margin-right: .5rem; }
@media (max-width: 520px) {
  .voet .voet__raam { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.2rem; }
  .voet__kolom:nth-child(3) { grid-column: auto; }
  .voet__kolom:nth-child(3) ul { display: grid; gap: .35rem; columns: auto; }
  .voet__kolom:nth-child(3) a { display: inline; padding: 0; background: none; border-radius: 0; font-size: .9rem; }
  .voet__contactkolom { display: contents; }
  .voet__jur { grid-column: 2; grid-row: 2; }
  .voet__jur .voet__kop2 { margin-top: 0; }
  .voet__jur ul { display: grid !important; gap: .35rem; }
  .voet__con { grid-column: 1 / -1; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.1); }
  .voet__wettelijk { flex-direction: column; gap: .15rem; }
  .voet__wettelijk > span + span::before { content: none; }
  .voet__slot { font-size: .82rem; gap: .9rem; }
}
@media (max-width: 520px) { .voet .voet__jur h4.voet__kop2 { margin-top: 0; } }
/* Contact onder Juridisch in de rechterkolom, naast de lijst van Kantoor. */
@media (max-width: 520px) {
  .voet__kolom:nth-child(3) { grid-row: 2 / span 2; }
  .voet__con { grid-column: 2; grid-row: 3; padding-top: 0; border-top: 0; }
  .voet__con .voet__contact { gap: .45rem; font-size: .9rem; }
  .voet__con .voet__contact .icoon { width: 15px; height: 15px; }
}

/* Wettelijke regel op één regel; op mobiel met de korte naam. */
.voet__wettelijk { display: inline; }
.voet__kort { display: none; }
@media (max-width: 520px) {
  .voet__wettelijk { display: block; white-space: nowrap; font-size: .78rem; }
  .voet__lang { display: none; }
  .voet__kort { display: inline; }
}
/* Watermerk groter. */
.voet::after { width: min(80vw, 1100px); right: -8%; bottom: -10%; opacity: .055; }
@media (max-width: 520px) { .voet::after { width: 120vw; right: -30%; bottom: -3%; } }

/* Adres in de voet op mobiel: zonder postcode, het huisnummer blijft bij de straat. */
@media (max-width: 520px) { .voet__postcode { display: none; } }
@media (max-width: 520px) { .voet__con .voet__contact li:last-child a { white-space: nowrap; } }
@media (max-width: 345px) { .voet__con .voet__contact li:last-child a { white-space: normal; } }

/* Voet mobiel, laatste indeling: Kantoor | Juridisch naast elkaar, Contact over
   de volle breedte eronder met het volledige adres. */
@media (max-width: 520px) {
  .voet__kolom:nth-child(3) { grid-row: auto; }
  .voet__con { grid-column: 1 / -1; grid-row: auto; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.1); }
  .voet__postcode { display: inline; }
  .voet__con .voet__contact li:last-child a { white-space: normal; }
}
/* Voet: links zachter dan de witte kopjes, zodat het verschil duidelijk is. */
.voet__kolom a, .voet__contact a { color: rgba(255,255,255,.62); }
.voet__kolom a:hover, .voet__contact a:hover { color: var(--paars-licht); }
.voet__kolom h4 { color: #fff; font-weight: 700; }

/* Hero op mobiel: de twee knoppen naast elkaar. */
@media (max-width: 600px) {
  .hero__knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .hero__knoppen .knop { padding: .9rem .6rem; font-size: .92rem; white-space: nowrap; }
  .hero__knoppen .knop .icoon { width: 16px; height: 16px; }
}

/* Onderste balk van de voet in hetzelfde verloop als de bovenbalk. */
.voet { padding-bottom: 0; }
.voet__balk { position: relative; z-index: 1; margin-top: clamp(40px, 5vw, 64px); background: var(--verloop-plat); }
.voet .voet__slot { margin-top: 0; padding: .9rem 0; border-top: 0; }
.voet__slot, .voet__slot > span, .voet__wettelijk { color: rgba(255,255,255,.88) !important; }
.voet__slot .voet__credit { color: rgba(255,255,255,.8); }
.voet__slot .voet__credit .im-naam { color: #fff; }
.voet__slot .voet__credit:hover, .voet__slot a:hover { color: #fff; }
@media (max-width: 520px) { .voet__balk { margin-top: 1.8rem; } .voet .voet__slot { padding: .9rem 0 1rem; } }

/* Watermerk in de voet: het bergteken staat met zijn voet op de onderste balk
   en rijst daarboven op, groot en rechts. */
.voet::after { content: none; }
.voet__balk::before {
  content: ""; position: absolute; right: -2%; bottom: 100%; width: min(70vw, 900px); aspect-ratio: 306 / 100;
  background: linear-gradient(120deg, #fff, var(--paars-licht)); opacity: .07; pointer-events: none;
  -webkit-mask: url("../img/teken.svg") right bottom / contain no-repeat; mask: url("../img/teken.svg") right bottom / contain no-repeat;
}
@media (max-width: 520px) { .voet__balk::before { width: 125vw; right: -12%; opacity: .09; } }
/* Op mobiel is de onderste balk gewoon de donkere voet, zonder verloop, met
   een dun lijntje erboven; op desktop blijft het verloop. */
@media (max-width: 520px) {
  .voet__balk { background: none; border-top: 1px solid rgba(255,255,255,.1); margin-left: var(--marge, 16px); margin-right: var(--marge, 16px); }
  .voet__slot, .voet__slot > span, .voet__wettelijk { color: rgba(255,255,255,.55) !important; }
  .voet__slot .voet__credit { color: rgba(255,255,255,.5); }
  .voet__slot .voet__credit .im-naam { color: var(--paars-licht); }
}
@media (max-width: 520px) {
  .voet__balk { margin-left: 0; margin-right: 0; border-top: 0; }
  .voet .voet__slot { border-top: 1px solid rgba(255,255,255,.1); }
}

/* De toppen van een berglijn schuiven de onderpadding van de sectie erboven
   in. Die padding was precies zo hoog als de berg, of op sommige plekken
   minder, waardoor de toppen over kaarten en tekst liepen (Odelin,
   2026-10-04). Nu altijd de berghoogte plus lucht, net als onder .berg-onder. */
main > :has(+ .berg-rand, + .sectie--donker) {
  padding-bottom: calc(clamp(64px, 8vw, 112px) + clamp(32px, 3.6vw, 52px)) !important;
}
/* Het bergteken in de voet hangt aan .voet__balk, die na de kolommen komt en
   dus eroverheen tekende. De kolommen erboven leggen. */
.voet > .omhulsel { z-index: 2; }

/* ── Ombouw 2026-10-06: persoonlijk, ondernemingen, geen ZZP-kant ───────── */
/* Hero met de foto van Ismail en Alper rechts. */
.hero__kaart--foto { grid-template-columns: 1fr 1fr; }
.hero__label { margin: 0 0 1rem; font-family: var(--kop); font-weight: 600; font-size: .95rem; color: var(--paars-licht); }
.hero__label span { white-space: nowrap; }
.hero__foto { position: relative; margin: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(10,20,60,.6); border: 1px solid rgba(255,255,255,.22); }
.hero__foto img { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 932; object-fit: cover; }
.hero__foto figcaption {
  position: absolute; left: .8rem; right: .8rem; bottom: .8rem; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
  padding: .75rem 1rem; border-radius: 14px; color: #fff;
  background: linear-gradient(160deg, rgba(20,30,70,.42), rgba(40,20,80,.32));
  border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.hero__foto figcaption span { display: grid; font-size: .82rem; line-height: 1.35; color: rgba(255,255,255,.82); }
.hero__foto figcaption strong { font-family: var(--kop); font-size: .98rem; color: #fff; }
@media (max-width: 900px) {
  .hero__kaart--foto { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hero__foto figcaption { position: static; border-radius: 0; background: var(--blauw-diep); grid-template-columns: 1fr; gap: .4rem; }
}

/* Ons verhaal: beeld links, tekst rechts. */
.verhaal { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(1.6rem, 4.4vw, 4rem); align-items: center; }
.verhaal__beeld:empty { display: none; }
.verhaal:has(.verhaal__beeld:empty) { grid-template-columns: 1fr; }
.verhaal__foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 22px; box-shadow: var(--schaduw-op); }
.verhaal--foto .verhaal__foto { aspect-ratio: 1400 / 932; }
/* De foto even hoog als de tekst ernaast, zodat er geen gat onder valt. */
@media (min-width: 901px) {
  .verhaal--foto { align-items: stretch; }
  .verhaal--foto .verhaal__beeld { position: relative; min-height: 360px; }
  .verhaal--foto .verhaal__foto { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: center 30%; }
}
.mijlpalen { list-style: none; margin: 1.8rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--lijn); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.mijlpalen li { display: grid; gap: .15rem; }
.mijlpalen strong { font-family: var(--kop); font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1; background: var(--verloop); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mijlpalen span { font-size: .92rem; color: var(--grijs); line-height: 1.4; }
@media (max-width: 900px) { .verhaal { grid-template-columns: 1fr; } }

/* Het team als staande portretten (3:4), vier naast elkaar. */
.teamraster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.teamlid { display: flex; flex-direction: column; background: var(--wit); border: 1px solid var(--lijn); border-radius: 20px; overflow: hidden; }
.sectie--wit .teamlid { background: var(--grond); border-color: transparent; }
.teamlid__foto { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.teamlid__foto--letters { display: grid; place-items: center; font-family: var(--kop); font-weight: 700; font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: .02em; color: rgba(255,255,255,.92); background: var(--verloop-gloed); }
.teamlid__tekst { display: flex; flex-direction: column; gap: .15rem; flex: 1; padding: 1rem 1.2rem 1.2rem; }
.teamlid strong { font-family: var(--kop); font-size: 1.12rem; line-height: 1.25; color: var(--inkt); }
.teamlid__tekst > span { font-size: .92rem; color: var(--grijs); line-height: 1.35; }
.teamlid__over { margin: .5rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--grijs); }
/* Mail met icoon, altijd onderaan de kaart zodat de adressen op één lijn
   staan, ook als de functie over twee regels loopt (Odelin, 2026-10-08). */
.teamlid__mail { display: flex; align-items: center; gap: .45rem; margin-top: auto; padding-top: .7rem; font-size: .9rem; font-weight: 600; color: var(--blauw); text-decoration: none; overflow-wrap: anywhere; }
.teamlid__mail .icoon { flex: none; width: 16px; height: 16px; }
.teamlid__mail:hover span { text-decoration: underline; }
/* Een titel met een streep (Ismail) onder elkaar, zonder de streep. */
.teamlid .roldeel { display: block; }
.teamlid .streep { display: none; }
@media (max-width: 900px) { .teamraster { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 640px) { .teamraster { grid-template-columns: repeat(2, 1fr); gap: .8rem; } .teamlid__tekst { padding: .8rem .9rem 1rem; } .teamlid strong { font-size: 1rem; } }
/* Team als carrousel op de voorpagina: vier kaarten in beeld, de rest schuift
   zijwaarts met scroll-snap. Op smallere schermen piekt de volgende kaart. */
.teamraster--carrousel { --zicht: 4; display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - (var(--zicht) - 1) * clamp(1rem, 2vw, 1.6rem)) / var(--zicht)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .2rem; }
.teamraster--carrousel::-webkit-scrollbar { display: none; }
.teamraster--carrousel > .teamlid { scroll-snap-align: start; }
.teamraster--carrousel:focus-visible { outline: 2px solid var(--blauw); outline-offset: 6px; border-radius: 20px; }
@media (prefers-reduced-motion: no-preference) { .teamraster--carrousel { scroll-behavior: smooth; } }
@media (max-width: 900px) { .teamraster--carrousel { --zicht: 2.6; grid-template-columns: none; } }
@media (max-width: 640px) { .teamraster--carrousel { --zicht: 1.6; grid-template-columns: none; } }
.carrousel__knoppen { display: inline-flex; gap: .5rem; }
.carrousel__knoppen[hidden] { display: none; }
.carrousel__knop { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--blauw); background: transparent; color: var(--blauw); cursor: pointer; transition: background .15s, color .15s, border-color .15s, opacity .15s; }
.carrousel__knop:hover:not(:disabled) { background: var(--verloop-plat); border-color: transparent; color: #fff; }
.carrousel__knop:disabled { opacity: .35; cursor: default; }
.carrousel__knop--terug .icoon { transform: scaleX(-1); }

/* Lidmaatschappen: logo's op witte tegels, ook in de gekleurde band. */
.leden { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-self: center; }
.leden a { display: grid; place-items: center; height: 100%; min-height: 110px; padding: 1.2rem 1.4rem; background: var(--wit); border-radius: var(--rond); border: 1px solid var(--lijn); text-decoration: none; transition: transform .2s var(--zacht), box-shadow .2s; }
.leden a:hover { transform: translateY(-2px); box-shadow: var(--schaduw-op); }
.leden img { display: block; max-width: 100%; max-height: 58px; width: auto; height: auto; }
.leden .lid__naam { font-family: var(--kop); font-weight: 700; font-size: 1.4rem; color: var(--blauw); }
.leden--band a { border-color: transparent; box-shadow: 0 18px 40px -22px rgba(10,20,60,.55); }
.sectie--donker .band__link { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) { .leden { grid-template-columns: repeat(3, 1fr); gap: .6rem; } .leden a { min-height: 80px; padding: .7rem; } }

/* Voor klanten: alles onder elkaar, elke categorie met een label in de stijl
   van onze knoppen (verloop, klein) en een lijn tussen de categorieën. */
.linkgroep + .linkgroep { margin-top: clamp(2.4rem, 4vw, 3.2rem); padding-top: clamp(2.4rem, 4vw, 3.2rem); border-top: 1px solid var(--lijn); }
.linkgroep__kop { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1.2rem; }
.linkgroep__label { display: inline-flex; align-items: center; gap: .55rem; margin: 0; padding: .7rem 1.1rem; border-radius: var(--rond-klein); background: var(--verloop); color: #fff; font: 600 .97rem/1 var(--tekst); letter-spacing: 0; }
.linkgroep__label .icoon { width: 18px; height: 18px; flex: none; }
.linkgroep__kop p { margin: 0; color: var(--grijs); }
.linkraster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.linkkaart { position: relative; display: grid; align-content: start; gap: .2rem; height: 100%; padding: 1.2rem 3rem 1.2rem 1.3rem; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond); text-decoration: none; color: var(--inkt); transition: border-color .15s, transform .2s var(--zacht), box-shadow .2s; }
.linkkaart:hover { border-color: var(--blauw); transform: translateY(-2px); box-shadow: var(--schaduw); color: var(--inkt); }
.linkkaart strong { font-family: var(--kop); font-size: 1.08rem; }
.linkkaart span { font-size: .92rem; color: var(--grijs); line-height: 1.45; }
/* Logo bovenin de kaart: vaste hoogte, links uitgelijnd, zodat vierkante
   merktekens en brede woordmerken op dezelfde lijn staan. */
.linkkaart .linkkaart__logo { display: flex; align-items: center; height: 44px; margin-bottom: .7rem; }
.linkkaart__logo img { display: block; height: 100%; width: auto; max-width: 160px; object-fit: contain; object-position: left center; }
/* Documenten: zacht vlak, het icoon zelf in het verloop (Odelin, 2026-10-07).
   De lijnen krijgen de kleurovergang via #verloop-icoon (bouw_links). */
.linkkaart .linkkaart__logo--icoon { width: 44px; justify-content: center; border-radius: 12px; background: linear-gradient(120deg, var(--blauw-tint), var(--paars-tint)); }
.linkkaart__logo--icoon .icoon { stroke: url(#verloop-icoon); }
.linkkaart__logo--icoon .icoon { width: 22px; height: 22px; }
.linkkaart__pijl { position: absolute; top: 1.25rem; right: 1.1rem; color: var(--blauw); }

/* Klachten- en klokkenluidersregeling. */
.regeling { grid-template-columns: 1.5fr 1fr; }
.regeling__tekst h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.regeling__stappen { padding-left: 1.2rem; display: grid; gap: .6rem; }
.regeling__punten { padding-left: 1.2rem; display: grid; gap: .4rem; }
.regeling__begrippen { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.4rem; margin: 0; }
.regeling__begrippen dt { font-weight: 700; color: var(--inkt); }
.regeling__begrippen dd { margin: 0; color: var(--grijs); }
@media (max-width: 640px) { .regeling__begrippen { grid-template-columns: 1fr; gap: .15rem; } .regeling__begrippen dd { margin-bottom: .6rem; } }
.regeling__zij { position: sticky; top: 140px; }
@media (max-width: 960px) { .regeling { grid-template-columns: 1fr; } .regeling__zij { position: static; } }

/* De lidmaatschappen als kleine witte tegels in de voet. */
/* Lidmaatschappen als rij onderin de voet, logo's naast elkaar (Odelin,
   2026-10-07; eerst namen ze een eigen kolom in). Op een breed scherm staan
   Juridisch en Contact (laatste, met openingstijden) als eigen kolommen. */
@media (min-width: 961px) {
  .voet__raam { grid-template-columns: 1fr 1fr 1fr 1.25fr; }
  .voet__contactkolom { display: contents; }
  .voet .voet__contactkolom h4.voet__kop2 { margin-top: 0; }
}
.voet__leden { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.6rem; margin-top: clamp(2rem, 4vw, 2.8rem); padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.12); }
.voet__leden h4 { margin: 0; }
.leden--voet { display: flex; flex-wrap: wrap; gap: .7rem; }
.leden--voet a { min-height: 0; height: 56px; width: 170px; padding: .6rem 1rem; border: 0; }
.leden--voet img { max-height: 32px; }
.leden--voet .lid__naam { font-size: 1.05rem; }
@media (max-width: 600px) { .voet__leden { flex-direction: column; align-items: flex-start; } .leden--voet { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; gap: .5rem; } .leden--voet a { width: auto; height: 50px; padding: .5rem .6rem; } }

/* Hero met de duofoto als achtergrond (2026-10-06). Zelfde vorm als de hero
   altijd had: volle breedte, verloop, usp's onderin en de hangende toppen.
   De foto is links doorgetrokken (hero-ismail-alper.jpg, 3,2:1) en schaalt op
   de hoogte, dus Ismail staat op 1,035 x de hoogte van rechts en Alper op
   0,51 x. De foto staat stil (geen zoom of gloed, op
   Odelins verzoek) en het verloop van de site ligt als waas over de hele
   foto: links dicht voor de tekst, rechts maar een zweem zodat
   Ismail en Alper niet wegvallen. Geen namen in de hero. */
.hero__beeld { --h: clamp(560px, 42vw, 660px); position: relative; height: var(--h); overflow: hidden; isolation: isolate; }
.hero__achter { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hero__smal { display: none; }
/* Foto's en logo's laten zich niet wegslepen (Odelin, 2026-10-10). */
img { -webkit-user-drag: none; user-select: none; }
.hero__waas { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(90deg,
    rgba(20,70,150,.82) 0%, rgba(22,70,152,.78) 18%, rgba(28,70,156,.68) 30%,
    rgba(36,68,160,.54) 40%, rgba(46,66,165,.38) 49%, rgba(58,65,170,.24) 57%,
    rgba(72,64,174,.13) 65%, rgba(86,64,178,.06) 74%, rgba(100,64,180,.03) 85%, rgba(106,63,181,.02) 100%); }
.hero__binnen { height: 100%; display: flex; align-items: center; }
.hero--foto .hero__tekst { max-width: 600px; }
.hero--foto h1 { max-width: none; }
.hero--foto .usps { border-top: 1px solid rgba(255,255,255,.18); }
/* Smaller dan 1240 px valt de tekst over Ismail. Dan vult een hoge versie
   van de duofoto (hero-mobiel.jpg) de hele hero, met één fade over de hele
   foto die naar onderen dichter wordt voor de tekst (Odelin, 2026-10-10). */
@media (max-width: 1240px) {
  .hero__beeld { height: auto; background: #1E4AA0; }
  .hero__achter { display: none; }
  .hero__smal { display: block; position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; }
  .hero__waas { display: block; inset: 0; height: auto; background:
    linear-gradient(180deg, rgba(30,74,160,.12) 0%, rgba(30,74,160,.2) 25%, rgba(30,74,160,.6) 45%, rgba(32,72,165,.82) 65%, rgba(40,68,168,.88) 100%); }
  .hero__binnen { padding: clamp(15rem, 52vw, 24rem) 0 clamp(1.6rem, 4vw, 2.4rem); }
}
@media (max-width: 640px) {
  .hero__binnen { padding-top: 15rem; }
  .hero--foto .hero__label { font-size: .85rem; }
  .hero--foto .lead { font-size: 1rem; }
}
/* Diensten op de voorpagina in drie groepen (2026-10-07). Subgrid houdt kop,
   tekst, lijst en link per rij op dezelfde hoogte. */
/* Vier kaarten in twee rijen van twee: in vier kolommen werd het te krap
   (Odelin, 2026-10-10). */
.dienstgroepen { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(10, auto); column-gap: clamp(1rem, 2vw, 1.6rem); row-gap: clamp(1rem, 2vw, 1.6rem); }
.dienstgroep { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.dienstgroep__icoon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--blauw-tint); color: var(--blauw); }
.dienstgroep__icoon .icoon { width: 24px; height: 24px; }
.dienstgroep h3 { margin: 1.1rem 0 .45rem; }
.dienstgroep > p { margin: 0 0 1rem; color: var(--grijs); max-width: 44ch; text-wrap: pretty; }   /* kortere regels in de brede kaarten */
.dienstgroep .vinklijst { align-self: start; }
.dienstgroep .vinklijst a { color: var(--inkt); text-decoration: none; }
.dienstgroep .vinklijst a:hover { color: var(--blauw); text-decoration: underline; }
.dienstgroep .kaart__meer { align-self: end; }
@media (max-width: 960px) {
  .dienstgroepen { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 1rem; }
  .dienstgroep { grid-row: auto; grid-template-rows: none; }
}

/* Sfeerband op Werken bij (2026-10-07): het kantoorbeeld over de volle breedte
   met het verloop van de site eroverheen, links dicht voor de tekst. */
.sfeerband { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(380px, 40vw, 520px); color: #fff; }
.sfeerband__beeld { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.sfeerband::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(15,80,150,.94) 0%, rgba(30,74,160,.82) 32%, rgba(70,62,175,.45) 55%, rgba(106,63,181,.2) 100%); }
.sfeerband__tekst { padding-block: clamp(3rem, 6vw, 4.5rem); }
.sfeerband__tekst > * { max-width: 560px; }
.sfeerband .oog { color: var(--paars-licht); }
.sfeerband h2 { color: #fff; }
.sfeerband .lead { color: rgba(255,255,255,.88); }
@media (max-width: 700px) { .sfeerband::before { background: linear-gradient(180deg, rgba(15,80,150,.86), rgba(106,63,181,.82)); } }
/* Tablet: Juridisch en Contact naast elkaar onder Diensten en Kantoor. */
@media (min-width: 521px) and (max-width: 960px) {
  /* Ook tussen 901 en 960px twee kolommen, anders blijft rechts naast
     Diensten en Kantoor een lege helft (de vier kolommen van breed). */
  .voet .voet__raam { grid-template-columns: 1fr 1fr; }
  .voet__contactkolom { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
  .voet .voet__contactkolom h4.voet__kop2 { margin-top: 0; }
}

/* Werken bij zonder vacature (de gewone stand): het sfeerbeeld opent de pagina,
   tekst links en rechts een witte kaart voor de open sollicitatie, zoals de
   ingangenkaart in de oude hero. */
.sfeerband--open { align-items: stretch; min-height: 0; }
.sfeerband__raam { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.6rem, 4vw, 4rem); align-items: center; padding-block: clamp(3rem, 6vw, 5rem); }
.sfeerband__raam .sfeerband__tekst { padding: 0; }
.sfeerband--open h1 { color: #fff; font-size: clamp(2.2rem, 4vw, 3.4rem); margin: 0 0 1rem; }
.sfeerband--open .kruimels { margin-bottom: 1.6rem; }
.sfeerband__kaart { background: var(--wit); color: var(--inkt); border-radius: 20px; padding: clamp(1.4rem, 2.6vw, 2rem); box-shadow: 0 30px 60px -28px rgba(10,20,60,.6); display: grid; gap: .5rem; }
.sfeerband__kaartkop { margin: 0; font: 700 1.3rem/1.2 var(--kop); color: var(--inkt); }
.sfeerband__kaart > p:not(.sfeerband__kaartkop) { margin: 0; color: var(--grijs); }
.sfeerband__kaart .vinklijst { margin-bottom: .8rem; }
.sfeerband__kaart .knop { width: 100%; }
.sfeerband__bel { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: .2rem; padding: .5rem; font-size: .93rem; color: var(--grijs); text-decoration: none; }
.sfeerband__bel strong { color: var(--blauw); }
.sfeerband__bel:hover strong { text-decoration: underline; }
.sfeerband__bel .icoon { width: 16px; height: 16px; color: var(--blauw); }
@media (max-width: 900px) { .sfeerband__raam { grid-template-columns: 1fr; } }
.sfeerband__vacature { position: relative; display: grid; gap: .2rem; padding: .9rem 2.6rem .9rem 1rem; margin-bottom: .4rem; border-radius: 14px; background: linear-gradient(120deg, var(--blauw-tint), var(--paars-tint)); color: var(--inkt); text-decoration: none; transition: transform .2s var(--zacht); }
.sfeerband__vacature:hover { transform: translateY(-2px); color: var(--inkt); }
.sfeerband__vacature strong { font: 700 1.1rem/1.25 var(--kop); }
.sfeerband__vacmeta { font-size: .84rem; font-weight: 600; color: var(--blauw); }
.sfeerband__vacsalaris { font-size: .93rem; color: var(--grijs); }
.sfeerband__vacpijl { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--blauw); }

/* Inleiding op home als duo's, het effect van Taurus (2026-10-08): foto en een
   gevuld tekstvlak naast elkaar en even hoog, zodat de tekst nooit langer
   doorloopt dan de foto. Het tweede blok gespiegeld. Op de foto een label
   zoals het dakbord bij Atlas, hier in het verloop van de site. Geen personen
   in deze tekst (Ismail); opgezet zoals Boutkan, maar in eigen woorden. */
.duos { display: grid; gap: clamp(2.4rem, 5vw, 4.4rem); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.8rem); align-items: stretch; }
.duo__beeld { position: relative; margin: 0; overflow: hidden; border-radius: 22px; min-height: clamp(260px, 26vw, 380px); }
.duo__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.duo--gespiegeld .duo__beeld { order: 2; }
.duo__tekst { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(1.6rem, 3.4vw, 3rem); border-radius: 22px; background: var(--grond); }
.duo__tekst h2 { margin: 0 0 1rem; }
.duo__tekst p:not(.oog) { color: var(--grijs); margin: 0 0 .9rem; }
.duo__tekst p:last-child { margin-bottom: 0; }
.duo__label { position: absolute; left: 1.4rem; bottom: 1.4rem; display: grid; justify-items: center; padding: .7rem 1.4rem .65rem; border-radius: 14px; background: var(--verloop); color: #fff; font: 700 1.9rem/1 var(--kop); letter-spacing: -.01em; box-shadow: 0 16px 30px -14px rgba(20,20,80,.6); }
.duo__label span { font: 600 .78rem/1 var(--tekst); letter-spacing: .02em; color: rgba(255,255,255,.85); margin-bottom: .3rem; }
@media (max-width: 800px) {
  .duo { grid-template-columns: 1fr; }
  .duo--gespiegeld .duo__beeld { order: 0; }
  /* De foto zelf bepaalt hier de hoogte. Met alleen aspect-ratio op het
     figure en een absolute foto bleef het vlak op sommige telefoons 0 hoog. */
  .duo__beeld { min-height: 0; }
  .duo__beeld img { position: static; display: block; height: auto; aspect-ratio: 16 / 10; }
}

/* ── Kennismaken: keuzes als knoppen ─────────────────────────────────────── */

/* Op een telefoon de twee oproepknoppen naast elkaar, even breed. */
@media (max-width: 560px) {
  .oproep__knoppen { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .oproep__knoppen .knop { padding-left: .6rem; padding-right: .6rem; font-size: .9rem; white-space: nowrap; }
  .oproep__knoppen .knop .icoon { display: none; }
}

/* Logo's van de loonomgevingen onder in de zijkaart op Salarisadministratie. */
.zijlogos { display: flex; gap: .8rem; margin-top: auto; padding-top: 1.2rem; }
.zijlogos a { text-decoration: none; text-align: center; }
.zijlogos a { display: grid; place-items: center; gap: .4rem; flex: 1; padding: .9rem 1rem .8rem; border: 1px solid var(--lijn); border-radius: 14px; background: #fff; transition: border-color .15s; }
.zijlogos a:hover, .zijlogos a:focus-visible { border-color: var(--blauw); }
.zijlogos small { font-size: .82rem; font-weight: 600; color: var(--inkt); }
.zijlogos img { max-height: 34px; max-width: 100%; width: auto; height: auto; }

/* Dienstenpagina: de vier onderdelen als lijst om te scannen (2026-10-10). */
.dienstrijen { border-top: 1px solid var(--lijn); }
.dienstrij { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.25fr) 44px; gap: clamp(1rem, 2.4vw, 2rem); align-items: center; padding: clamp(1.4rem, 2.6vw, 2rem) clamp(.6rem, 1.4vw, 1.2rem); border-bottom: 1px solid var(--lijn); color: var(--inkt); text-decoration: none; border-radius: 0; transition: background .18s; }
.dienstrij:hover { background: var(--grond); }
.dienstrij__icoon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--blauw-tint); color: var(--blauw); align-self: start; }
.dienstrij--paars .dienstrij__icoon { background: var(--paars-tint); color: var(--paars, #6A3FB5); }
.dienstrij__icoon .icoon { width: 26px; height: 26px; }
.dienstrij__nr { display: block; font-family: var(--kop); font-size: .8rem; font-weight: 700; letter-spacing: .12em; color: var(--grijs); margin-bottom: .2rem; }
.dienstrij h3 { margin: 0 0 .7rem; font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.dienstrij__punten { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.dienstrij__punten li { padding: .3rem .7rem; border-radius: 999px; background: var(--blauw-tint); color: var(--blauw); font-size: .84rem; font-weight: 600; }
.dienstrij--paars .dienstrij__punten li { background: var(--paars-tint); color: var(--paars, #6A3FB5); }
.dienstrij p { margin: 0; color: var(--grijs); font-size: .97rem; line-height: 1.65; }
.dienstrij__pijl { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--lijn); color: var(--blauw); transition: background .18s, color .18s, border-color .18s, transform .18s; }
.dienstrij__pijl .icoon { width: 18px; height: 18px; }
.dienstrij:hover .dienstrij__pijl { background: var(--blauw); border-color: var(--blauw); color: #fff; transform: translateX(3px); }
@media (max-width: 900px) {
  .dienstrij { grid-template-columns: 48px minmax(0, 1fr) 40px; align-items: start; }
  .dienstrij__icoon { width: 48px; height: 48px; }
  .dienstrij p { grid-column: 2 / 4; }
  .dienstrij__pijl { grid-row: 1; grid-column: 3; width: 40px; height: 40px; }
}

/* ── Mobiel menu, opnieuw opgezet (2026-10-10) ───────────────────────────
   Een eigen la (#la) los van het desktopmenu; .menu doet op mobiel niet mee. */
.la { display: none; }
@media (max-width: 1060px) {
  .balk .menu { display: none !important; }
  .la--open {
    display: flex; flex-direction: column; gap: 1.4rem;
    position: fixed; top: 76px; left: 0; right: 0; height: calc(100dvh - 114px);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 1rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom)); background: var(--wit); border-top: 1px solid var(--lijn);
  }
  html.la-open { overflow: hidden; }   /* alleen html: met body erbij laat de plakkende kopbalk los */
  html.la-open .naarboven { display: none; }
  .la ul { list-style: none; margin: 0; padding: 0; }
  .la__hoofd > li { border-bottom: 1px solid var(--lijn); }
  .la__hoofd > li > a, .la__open {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 1rem .2rem; border: 0; background: none; cursor: pointer; text-align: left;
    font: 600 1.2rem var(--kop); color: var(--inkt); text-decoration: none;
  }
  .la__hoofd > li > a[aria-current="page"], .la__open[data-hier] { color: var(--blauw); }
  .la__hoofd > li > a[aria-current="page"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blauw); }
  .la__open svg { width: 20px; height: 20px; color: var(--grijs); transition: transform .2s; }
  .la__open[aria-expanded="true"] svg { transform: rotate(180deg); }
  .la__sub { padding: 0 0 1rem .2rem; }
  .la__sub[hidden] { display: none; }
  .la__groepkop { margin: .3rem 0 .35rem; font: 600 .9rem var(--kop); color: var(--blauw); }
  .la__groepkop--paars { color: var(--paars); margin-top: .8rem; }
  .la__groep { display: grid; gap: .15rem; }
  .la__groep a { display: flex; align-items: center; gap: .8rem; padding: .4rem .4rem; border-radius: 12px; color: var(--inkt); font-size: 1.02rem; font-weight: 500; text-decoration: none; }
  .la__groep a[aria-current="page"] { background: var(--grond); font-weight: 600; }
  .la__icoon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--blauw-tint); color: var(--blauw); }
  .la__groep--paars .la__icoon { background: var(--paars-tint); color: var(--paars); }
  .la__icoon .icoon { width: 18px; height: 18px; }
  .la__sub > a.la__alle { display: flex; align-items: center; gap: .4rem; margin-top: .9rem; padding: .9rem .4rem 0; border: 0; border-top: 1px solid var(--lijn); border-radius: 0; width: 100%; color: var(--blauw); font-size: 1rem; font-weight: 600; text-decoration: none; }
  .la__alle .icoon { width: 16px; height: 16px; }
  .la__tegels { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .la__tegels a { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: .95rem 1rem; border-radius: 14px; background: var(--grond); color: var(--inkt); font-weight: 600; font-size: .95rem; line-height: 1.25; text-decoration: none; }
  .la__tegels a .icoon { width: 22px; height: 22px; color: var(--blauw); }
  .la__tegels a[aria-current="page"] { background: var(--blauw-tint); color: var(--blauw); }
  .la__onder { display: grid; gap: .6rem; margin-top: auto; }
  .la__onder .knop { justify-content: center; padding: 1rem; border-radius: 14px; }
  .la__contact { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .la__contact a { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem .6rem; border: 1px solid var(--lijn); border-radius: 14px; color: var(--blauw); font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap; }
  .la__contact .icoon { width: 18px; height: 18px; }
}
.teamkop { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }

/* Labels boven een sectie als glazen pil, net als de kruimels (2026-10-10). */
.oog {
  display: flex; align-items: center; width: fit-content; max-width: 100%;
  padding: .34rem .9rem; border-radius: 999px; font-size: .88rem; line-height: 1.3;
  background: rgba(255,255,255,.6); border: 1px solid rgba(15,80,150,.14);
  box-shadow: 0 1px 2px rgba(15,40,90,.04), inset 0 1px 0 rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sectie--wit .oog, .duo__tekst .oog, .kaart .oog { background: var(--blauw-tint); border-color: rgba(15,80,150,.12); box-shadow: none; }
.kant-zzp .oog { color: var(--paars); border-color: rgba(106,63,181,.16); }
.sectie--donker .oog, .sfeerband .oog {
  color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); box-shadow: none;
}
.midden .oog, .sectie__kop.midden .oog { margin-inline: auto; }

/* Duo's op de voorpagina als collage (2026-10-10): niet twee gelijke helften
   maar om en om breed en smal. Boven een smalle foto naast een brede tekst,
   onder een smal tekstvlak naast een brede foto die er boven en onder
   uitsteekt. */
@media (min-width: 901px) {
  .duos .duo { grid-template-columns: 5fr 7fr; }
  .duos .duo--gespiegeld { grid-template-columns: 4fr 8fr; align-items: center; }
  .duos .duo--gespiegeld .duo__tekst { order: 0; position: relative; z-index: 1; margin-right: -4rem; box-shadow: var(--schaduw-op); background: var(--wit); }
  .duos .duo--gespiegeld .duo__beeld { min-height: clamp(380px, 34vw, 500px); }
  .duos .duo:first-child .duo__beeld { min-height: clamp(340px, 30vw, 440px); }
}

/* Sectiekop met een uitleg: de uitleg kort onder de kop, hooguit twee
   regels (Odelin, 2026-10-10). Kop links met tekst rechts oogde gek; alleen
   de keuzehulp (.wijzerkop) houdt de tekst ernaast. */
@media (min-width: 961px) {
  .sectie__kop:not(.midden):has(> .lead) { max-width: 72ch; }
  .sectie__kop:not(.midden) > h2 { text-wrap: balance; }
  .sectie__kop:not(.midden) > .lead { max-width: 64ch; text-wrap: pretty; }
}

/* Hero-label: wit in een donkere glazen pil, op elk scherm (Odelin,
   2026-10-10; eerst alleen op mobiel, daar viel het weg tegen de overhemden). */
@media all {
  .hero--foto .hero__label {
    display: inline-block; padding: .35rem .85rem; border-radius: 999px; color: #fff;
    background: rgba(18,40,110,.45); border: 1px solid rgba(255,255,255,.22);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
}
@media (max-width: 640px) {
  .hero--foto .hero__label { font-size: .74rem; padding: .32rem .7rem; white-space: nowrap; }
}
.hero.hero--foto h1 { text-wrap: wrap; }   /* balance zette "Een" los op een regel */
@media (max-width: 375px) { .hero.hero--foto h1 { font-size: 7.8vw; } }

/* Usp's in de hero op mobiel: titel met de uitleg eronder en een vinkje
   ervoor, in plaats van twee smalle kolommen (Odelin, 2026-10-10). */
@media (max-width: 780px) {
  .usps { padding: .4rem 0 1.4rem; }
  .usp { display: grid; grid-template-columns: 22px 1fr; column-gap: .75rem; row-gap: .1rem; padding: .85rem 0; align-items: start; }
  .usp::before {
    content: ""; grid-row: 1 / span 2; width: 22px; height: 22px; margin-top: .1rem; border-radius: 50%;
    background: rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat;
  }
  .usp strong, .usp span { grid-column: 2; }
  .usp strong { font-size: 1rem; line-height: 1.3; }
  .usp span { font-size: .88rem; line-height: 1.45; }
}
@media (max-width: 400px) { .hero--foto .hero__label { font-size: calc(2.9vw + .05rem); padding: .3rem .6rem; } }

/* ── Mobiele voet, opnieuw opgezet (2026-10-10) ──────────────────────────
   Eerst contact als kaart (bellen, mailen, route), dan Diensten en Kantoor
   naast elkaar, dan Juridisch over de volle breedte in twee kolommen. */
@media (max-width: 640px) {
  .voet .voet__raam { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 1rem; }
  .voet .voet__raam > .voet__contactkolom { display: contents; }
  .voet .voet__con { order: -1; grid-column: 1 / -1; padding: 1.1rem 1.1rem 1rem; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
  .voet .voet__con h4 { margin-bottom: .7rem; }
  .voet .voet__contact { display: grid; gap: .55rem; }
  .voet .voet__contact li { align-items: flex-start; }
  .voet .voet__con .voet__tijden { margin-top: .9rem; padding-top: .8rem; }
  .voet .voet__afspraak { font-size: .86rem; }
  .voet .voet__raam > .voet__kolom:not(.voet__contactkolom) { grid-column: auto; grid-row: auto; order: 1; }
  .voet .voet__jur { grid-column: 1 / -1; grid-row: auto; order: 2; }
  .voet .voet__jur ul { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem 1rem; columns: auto; }
  .voet .voet__jur li { margin: 0; }
  .voet__kolom h4, .voet__jur h4 { margin: 0 0 .7rem; font-size: .95rem; }
  .voet__kolom ul { display: grid; gap: .45rem; font-size: .9rem; }
  .voet__leden { margin-top: 2rem; }
  .voet__leden .leden { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .voet__slot { gap: .5rem; }
}
.hero__punt { font-style: normal; margin: 0 .55em; opacity: .7; }

/* Foto's in de duo's op home met een zachte waas in de kleuren van DevAlp
   (Odelin, 2026-10-10). Het jaartal-label blijft erboven. Op 2026-10-11 lichter
   gemaakt (was tot .6 paars in de hoek, te erg). */
.duos .duo__beeld::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(15,80,150,.04) 0%, rgba(30,74,160,.07) 45%, rgba(80,64,176,.16) 75%, rgba(106,63,181,.26) 100%);
}
.duos .duo__label { z-index: 1; }

/* Contact: eigen kaartje onder het vestigingsadres (bron/maak-kaart.py). */
/* Het kaartje heeft een vaste maat (Odelin, 2026-10-15). Staan de antwoorden
   van de keuzehulp boven het formulier, dan wordt het berichtvak lager, zodat
   de kolommen even lang blijven. De afbeelding is hoog en wordt bijgesneden. */
.contactkaartje { position: relative; display: block; aspect-ratio: 640 / 560; margin-top: 1rem; border-radius: 12px; overflow: hidden; border: 1px solid var(--lijn); transition: border-color .15s, box-shadow .2s; }
.contactkaartje:hover { border-color: var(--blauw); box-shadow: var(--schaduw); }
.contactkaartje img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.contactkaartje__bron { margin: .35rem 0 0; font-size: .72rem; color: var(--grijs); text-align: right; }
.contactkaartje__bron a { color: inherit; }

/* Alleen voor de verloopdefinitie van de iconen; geen style-attribuut vanwege de CSP. */
.svg-defs { position: absolute; }