/* ==========================================================================
   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 */
  --verloop:     linear-gradient(125deg, #0F5096 0%, #22509F 42%, #6A3FB5 100%);

  --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);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -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; }
.overslaan { position: absolute; left: -9999px; top: 0; background: var(--blauw); color: #fff; padding: .7rem 1rem; z-index: 200; border-radius: 0 0 var(--rond-klein) 0; }
.overslaan:focus { left: 0; }

/* ── Bovenbalk, zoals bij IRS ────────────────────────────────────────────── */
.topbalk { background: var(--blauw); color: #fff; font-size: .86rem; }
.topbalk__rij { display: flex; align-items: center; gap: 1.6rem; min-height: 38px; }
.topbalk a, .topbalk span { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.topbalk a:hover { text-decoration: underline; color: #fff; }
.topbalk .icoon { opacity: .8; }
.topbalk__adres { color: rgba(255,255,255,.82) !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: 0; 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; }

.merk { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--inkt); flex: 0 0 auto; }
.merk img { width: 34px; height: 34px; }
.merk__naam { font-family: var(--kop); font-weight: 700; font-size: 1.36rem; letter-spacing: -.03em; line-height: 1; color: var(--blauw); }
.merk__onder { display: block; font-size: .64rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--grijs-licht); margin-top: .25rem; }

/* Het menu staat links, direct naast het merk; alleen de knop Kennismaken
   schuift naar rechts. */
.menu { flex: 1; margin-left: clamp(1rem, 2.6vw, 2.6rem); display: flex; align-items: center; gap: .15rem; }
.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: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; }

/* ── 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__paneelvoet a:first-child { color: var(--paars); }
.menu__paneelvoet a:last-child::after { content: " \2192"; }
.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; }
}

.hamburger { display: none; margin-left: auto; background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px; padding: .6rem .85rem; cursor: pointer; color: var(--inkt); font: 600 .92rem var(--tekst); }

@media (max-width: 1060px) {
  .hamburger { display: inline-flex; align-items: center; gap: .45rem; }
  .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 - 76px); 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; }
}

/* ── 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); }
.knop--vol { background: var(--blauw); color: #fff !important; }
.knop--vol:hover { background: var(--blauw-diep); }
.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(--blauw); 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 oogje is nu een pil met een paarse stip, zoals bij Taurus */
.oog {
  display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.1rem;
  padding: .42em .95em .42em .8em; border-radius: 999px;
  background: var(--blauw-tint); color: var(--blauw-diep); border: 1px solid rgba(15,80,150,.16);
  font-size: .845rem; font-weight: 600; line-height: 1.4;
}
.oog::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--paars); flex: none; }
.sectie--wit .oog { background: var(--blauw-tint); }

.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; }

/* ── Bergvorm: het merkteken groot achter een gekleurd vlak ──────────────── */
.bergvorm { position: absolute; right: -2%; bottom: -8%; width: min(58%, 620px); color: #fff; opacity: .09; pointer-events: none; }
.bergvorm svg { width: 100%; height: auto; }

/* ── Schuine blauwe band, zoals bij IRS ──────────────────────────────────── */
.sectie--donker {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(100deg, var(--blauw) 64%, var(--blauw-op) 64%);
  clip-path: polygon(0 0, 30% 0, calc(30% + 44px) 44px, 100% 44px, 100% 100%, 0 100%);
  padding-top: calc(clamp(64px, 8vw, 112px) + 30px);
}
.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 { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.22); }
.sectie--donker .oog::before { background: 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); color: #fff; }
.hero > .bergvorm { z-index: -1; right: -3%; bottom: -14%; width: min(62%, 860px); opacity: .1; }
.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;
}
.hero__tekst { align-self: center; }
.hero__label { display: inline-flex; align-items: center; gap: .6rem; font-size: .9rem; font-weight: 600; color: #fff; margin-bottom: 1.2rem; }
.hero__label i { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.22); }
.hero h1 { color: #fff; max-width: 15ch; }
.hero h1 em { color: var(--paars-licht); font-style: italic; }
.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. */
.hero__zij { align-self: center; background: #fff; color: var(--inkt); border-radius: var(--rond); padding: 1.4rem; box-shadow: var(--schaduw-op); }
.hero__zijkop { font-family: var(--kop); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; margin-bottom: .9rem; }
.hero__persoon { display: flex; align-items: center; gap: .9rem; padding: .8rem .9rem; border-radius: var(--rond-klein); background: var(--grond); text-decoration: none; color: var(--inkt); margin-bottom: .6rem; transition: background .15s; }
.hero__persoon:hover { background: var(--blauw-tint); color: var(--inkt); }
.hero__persoon span { display: grid; font-size: .88rem; color: var(--grijs); line-height: 1.35; }
.hero__persoon strong { color: var(--inkt); font-size: .98rem; }
.hero__persoon em { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--blauw); margin-top: .15rem; }
.hero__persoon:first-of-type em { color: var(--paars); }
.hero__zijvoet { font-size: .86rem; color: var(--grijs); margin-top: .9rem; }
.hero__zijvoet a { font-weight: 600; white-space: nowrap; }

/* strook met usp's onder de hero, zoals bij Energie Zaken */
.usps { background: var(--wit); padding: clamp(34px, 4.4vw, 56px) 0 clamp(40px, 5vw, 64px); }
.usps__raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.usp { display: grid; gap: .3rem; }
.usp::before { content: ""; width: 34px; height: 3px; border-radius: 2px; background: var(--blauw); margin-bottom: .7rem; }
.usp:nth-child(even)::before { background: var(--paars); }
.usp strong { font-family: var(--kop); font-size: 1.06rem; letter-spacing: -.01em; }
.usp span { font-size: .93rem; color: var(--grijs); line-height: 1.5; }

/* 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__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: 50%; object-fit: cover; flex: none; }
.lid__tekst h3 { margin: 0 0 .15rem; }
.lid__rol { color: var(--blauw); font-weight: 600; margin-bottom: .2rem; }
.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;
}
.raster > .kaart:nth-child(even) .kaart__nr { background: var(--paars-tint); color: var(--paars); }
.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; }
.kruislijst li::before { border: 0; transform: none; content: "\00d7"; width: auto; height: auto; top: .45em; color: #9AA4AF; font-size: 1.15rem; line-height: 1; }

/* 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; }
.wijzer__balk { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--lijn); }
.wijzer__tel { font-size: .85rem; font-weight: 600; color: var(--grijs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wijzer__meter { flex: 1; height: 6px; background: var(--grond); border-radius: 99px; overflow: hidden; }
.wijzer__meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--blauw), var(--paars)); width: 0; transition: width .3s; border-radius: 99px; }
.wijzer__binnen { padding: clamp(1.4rem, 3vw, 2.4rem); }
.wijzer__vraag { 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; }

.opties { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.optie { position: relative; display: block; cursor: pointer; }
.optie input { position: absolute; opacity: 0; width: 0; height: 0; }
.optie span { display: block; padding: 1rem 1.15rem; border: 1.5px solid var(--lijn); border-radius: var(--rond-klein); background: var(--wit); font-size: .99rem; font-weight: 600; transition: border-color .15s, background .15s; }
.optie span small { display: block; font-weight: 400; font-size: .87rem; color: var(--grijs); margin-top: .2rem; }
.optie:hover span { border-color: #BFD0E6; background: var(--grond); }
.optie input:checked + span { border-color: var(--blauw); background: var(--blauw-tint); }
.optie input:focus-visible + span { outline: 2px solid var(--blauw); outline-offset: 2px; }

.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__terug { background: none; border: 0; color: var(--grijs); font: 500 .95rem var(--tekst); cursor: pointer; padding: .6rem 0; }
.wijzer__terug:hover { color: var(--inkt); }
.wijzer__voet .knop { margin-left: auto; }

.uitslag__kop { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; justify-content: space-between; }
.uitslag__label { display: inline-block; font-size: .8rem; font-weight: 600; padding: .3em .8em; border-radius: 999px; background: var(--paars-tint); color: #4E2C8C; margin-bottom: .8rem; }
.uitslag__prijs { text-align: right; }
.uitslag__vak { margin-top: 1.4rem; display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; }
.uitslag__vak h4 { font-size: .95rem; margin-bottom: .5rem; }
.uitslag__note { margin-top: 1.3rem; padding: 1rem 1.2rem; background: var(--blauw-tint); border-radius: var(--rond-klein); font-size: .95rem; }

/* ── 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; }
.veld__fout { color: #B3261E; font-size: .88rem; }
.veld__hulp { color: var(--grijs); font-size: .88rem; }
.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); }
.akkoord input { width: 1.1rem; height: 1.1rem; margin-top: .22rem; flex: 0 0 auto; accent-color: var(--blauw); }
.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(--blauw); color: #fff; }
.vraag__antwoord { padding: 0 1.3rem 1.3rem; color: var(--grijs); }

/* ── Slotoproep als gekleurde kaart ──────────────────────────────────────── */
.oproep { padding-block: clamp(40px, 6vw, 80px); }
/* volgt de oproep op een witte sectie, dan telt de lucht van die sectie al mee */
.sectie--wit + .oproep { padding-top: 0; }
.oproep__raam {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items: center;
  background: var(--verloop); color: #fff; border-radius: 24px; padding: clamp(1.8rem, 4.4vw, 3.4rem);
}
.oproep__raam .bergvorm { z-index: -1; width: 46%; bottom: -24%; }
.oproep h2 { color: #fff; }
.oproep .lead { color: rgba(255,255,255,.86); }
.oproep__knoppen { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: flex-end; }

/* ── 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__merk { display: flex; align-items: center; gap: .6rem; color: #fff !important; margin-bottom: 1rem; }
.voet__merk img { width: 30px; height: 30px; }
.voet__merk span { font-family: var(--kop); font-size: 1.3rem; font-weight: 700; letter-spacing: -.03em; }
.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; }

.maker { background: var(--blauw); color: #fff; text-align: center; padding: 10px 1rem; font-size: 13.5px; font-weight: 500; }
.maker a { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); }

/* ── Paginakop van de binnenpagina's: dezelfde kaart als de hero ─────────── */
.paginakop { position: relative; overflow: hidden; isolation: isolate; background: var(--verloop); color: #fff; padding: clamp(2.8rem, 6vw, 4.8rem) 0; }
.paginakop > .bergvorm { z-index: -1; width: min(44%, 600px); bottom: -22%; }
.paginakop + .sectie { padding-top: clamp(44px, 5.5vw, 78px); }
.paginakop h1 { color: #fff; max-width: 20ch; }
.paginakop .lead { color: rgba(255,255,255,.86); }
.kruimels { font-size: .86rem; color: rgba(255,255,255,.7); margin-bottom: 1.2rem; }
.kruimels a { color: #fff; text-decoration: none; }
.kruimels a:hover { text-decoration: underline; color: #fff; }

/* ── Losse hulpjes ───────────────────────────────────────────────────────── */
.mt2 { margin-top: 2rem; }
.mt1 { margin-top: 1.2rem; }
.midden { text-align: center; }
.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; }
  .usps__raster { grid-template-columns: 1fr 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 { justify-content: flex-start; }
  .voet__raam { grid-template-columns: 1fr 1fr; }
  .raster--2 { grid-template-columns: 1fr; }
  .sectie--donker { clip-path: none; padding-top: clamp(64px, 8vw, 112px); background: var(--blauw); }
}
@media (max-width: 600px) {
  .usps__raster, .raster--4, .team { grid-template-columns: 1fr; }
  .voet__raam { grid-template-columns: 1fr; }
  .uitslag__prijs { text-align: left; }
  .route__voet { flex-wrap: wrap; }
  .route__gaan { margin-left: 0; width: 100%; }
}

@media print {
  .topbalk, .balk, .maker, .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; }