/* =====================================================================
   OPTICIEN ONDERWEG  —  stijlblad
   ---------------------------------------------------------------------
   Kleur    : uit het aangeleverde logo. Paars #7A4C8D en aubergine #321446.
              Wit is de basis; paars is accent, geen vlaktevulling. De grote
              lila vlakken van de vorige versie zijn weg: die maakten de
              pagina's leeg en rommelig.
   Letter   : Faustina voor koppen. Dat is een humanistische schreefletter met
              dezelfde kalligrafische, licht uitlopende schreven als het
              woordmerk in het logo. Source Sans 3 voor lopende tekst: open
              lettervormen en een hoge x-hoogte, gemaakt voor leesbaarheid op
              scherm. Bewust niet Fraunces of Inter, de twee letters die op
              vrijwel elke gegenereerde site staan.
   Publiek  : gemiddeld 55 jaar en ouder. Daarom 19px basis, regelafstand 1.65,
              contrast ruim boven de norm, klikvlakken minimaal 48px en nergens
              dunne grijze tekst op een lichte ondergrond.
   Signatuur: het brilmotief uit het logo, twee ronde glazen met een brug. Komt
              terug als sectiescheiding, als stapnummerdrager en als watermerk.
   Beweging : volgens Werkwijze/Referenties/animate-skill.md. Alleen transform
              en opacity, alles onder 300ms, easing ease-out, hover alleen op
              apparaten met een muis, en volledig uit bij prefers-reduced-motion.
   ===================================================================== */

:root{
  --k1:#7A4C8D;          /* paars uit het logo */
  --k1-diep:#5E3970;     /* donkerder paars, voor hover en tekstaccent */
  --k1-zacht:#C3ACCC;    /* licht paars, uitsluitend op donkere vlakken */
  --k2:#321446;          /* aubergine uit het logo */
  --papier:#FFFFFF;
  --mist:#F6F3F7;        /* zeer lichte tint, voor rustvlakken */
  --inkt:#221030;        /* lopende tekst */
  --grijs:#4A4353;       /* bijschrift, ruim 9:1 op wit */
  --lijn:#E7E1EA;
  --lijn-donker:rgba(255,255,255,.16);
  --focus:#1B4DE4;

  --serif:"Faustina", Georgia, "Times New Roman", serif;
  --sans:"Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;

  --maxw:1160px;
  --smal:70ch;

  --duur-kort:140ms;
  --duur-mid:240ms;
  --uit:cubic-bezier(.23,1,.32,1);
  --inuit:cubic-bezier(.77,0,.175,1);

  --schaduw-zacht:0 1px 2px rgba(50,20,70,.05), 0 8px 28px rgba(50,20,70,.07);
  --schaduw-diep:0 2px 6px rgba(50,20,70,.06), 0 18px 48px rgba(50,20,70,.11);
}

*{ box-sizing:border-box }
html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  /* Vangnet tegen zijwaarts schuiven. `clip` en niet `hidden`, want `hidden`
     breekt de plakkende kopbalk. */
  overflow-x:clip;
}

body{
  margin:0; background:var(--papier); color:var(--inkt);
  font-family:var(--sans); font-size:19px; line-height:1.65;
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }
a{ color:inherit }

/* ---------- typografie ---------- */
h1,h2,h3,h4{
  font-family:var(--serif); font-weight:600; color:var(--k2);
  margin:0 0 .5em; text-wrap:balance;
}
h1{ font-size:clamp(2.1rem, 1.45rem + 2.7vw, 3.35rem); line-height:1.06; letter-spacing:-.018em }
h2{ font-size:clamp(1.65rem, 1.3rem + 1.5vw, 2.3rem);  line-height:1.15; letter-spacing:-.012em }
h3{ font-size:1.28rem; line-height:1.3; letter-spacing:-.006em }
h4{ font-size:1.05rem; line-height:1.35 }
p{ margin:0 0 1.15em; max-width:66ch }
p:last-child{ margin-bottom:0 }
.lead{ font-size:1.13rem; color:var(--grijs); max-width:56ch }
.grijs{ color:var(--grijs) }
strong,b{ font-weight:600 }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px }
.smal{ max-width:var(--smal) }
.wrap.smal{ max-width:var(--maxw) }
.wrap.smal > *{ max-width:var(--smal) }
section{ padding:76px 0 }
section.krap{ padding:52px 0 }
section.mist{ background:var(--mist) }
section.hero, section.bewijs, section.pagekop{ padding:0 }
@media (max-width:700px){ section{ padding:52px 0 } }

/* ---------- eyebrow: het brilmotief plus een woord ---------- */
.eyebrow{
  display:flex; align-items:center; gap:.7em; margin:0 0 1.1em; line-height:1.4;
  font-size:.82rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--k1-diep);
}
.eyebrow svg{ width:2em; height:auto; flex:none; color:var(--k1) }

/* ---------- focus: nooit weghalen ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--focus); outline-offset:3px; border-radius:6px;
}
.skip{ position:absolute; left:-9999px }
.skip:focus{
  position:fixed; left:16px; top:16px; z-index:200; background:#fff; color:var(--k2);
  padding:14px 20px; border-radius:10px; box-shadow:var(--schaduw-diep); font-weight:600;
}

/* ---------- knoppen ---------- */
.knop{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:600; font-size:1.02rem; line-height:1.2;
  text-decoration:none; text-align:center; cursor:pointer;
  padding:16px 30px; min-height:56px; border-radius:999px; border:2px solid transparent;
  transition:background var(--duur-kort) var(--uit), color var(--duur-kort) var(--uit),
             border-color var(--duur-kort) var(--uit), transform var(--duur-kort) var(--uit),
             box-shadow var(--duur-kort) var(--uit);
}
.knop svg{ width:1.15em; height:1.15em; flex:none }
.knop.primair{ background:var(--k1); color:#fff }
.knop.tweede{ background:transparent; color:var(--k2); border-color:var(--k2) }
.knop.licht{ background:#fff; color:var(--k2) }
.knop.omlijnd-licht{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7) }
.knop.klein{ padding:11px 22px; min-height:48px; font-size:.95rem }
.knop:active{ transform:translateY(1px) }
@media (hover:hover) and (pointer:fine){
  .knop.primair:hover{ background:var(--k1-diep); box-shadow:0 10px 24px rgba(122,76,141,.28) }
  .knop.tweede:hover{ background:var(--k2); color:#fff }
  .knop.licht:hover{ background:var(--mist) }
  .knop.omlijnd-licht:hover{ background:#fff; color:var(--k2); border-color:#fff }
}
.knopgroep{ display:flex; gap:14px; flex-wrap:wrap; align-items:center }
.knopgroep.midden{ justify-content:center }
.naast-knop{ font-size:.95rem; color:var(--grijs); margin:0 }
.naast-knop a{ color:var(--k2); font-weight:600; text-underline-offset:3px }

/* ---------- header ---------- */
.topbalk{
  background:var(--k2); color:rgba(255,255,255,.95);
  font-size:.92rem; text-align:center; padding:9px 16px;
}
.topbalk .verberg-klein{ display:inline }
@media (max-width:560px){ .topbalk .verberg-klein{ display:none } }
.topbalk a{ color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:3px }
header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--lijn);
}
nav.hoofdnav{ display:flex; align-items:center; gap:26px; padding:12px 0 }
.logo{ display:flex; align-items:center; margin-right:auto; flex:none }
.logo img{ height:46px; width:auto }
.navlinks{ display:flex; align-items:center; gap:24px; list-style:none; margin:0; padding:0 }
.navlinks a{
  text-decoration:none; font-weight:600; font-size:1rem; color:var(--k2);
  padding:8px 2px; border-bottom:2px solid transparent;
  transition:border-color var(--duur-kort) var(--uit), color var(--duur-kort) var(--uit);
}
@media (hover:hover){ .navlinks a:hover{ border-color:var(--k1); color:var(--k1-diep) } }
.navlinks a[aria-current="page"]{ border-color:var(--k1); color:var(--k1-diep) }
.navcta a{ border-bottom:none !important }
.menuknop{
  display:none; align-items:center; gap:9px; background:#fff; border:2px solid var(--k2);
  border-radius:999px; padding:10px 18px; min-height:48px; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:1rem; color:var(--k2);
}
.menuknop svg{ width:22px; height:22px }
.navbackdrop{ display:none }
.vastebalk{ display:none }

@media (max-width:940px){
  /* Belangrijk, en de oorzaak van een echte fout op de telefoon:
     backdrop-filter maakt van de kopbalk een houder voor alles wat
     position:fixed is. Het menupaneel werd daardoor niet over de pagina
     gelegd maar opgesloten in de kopbalk, zodat je alleen de eerste regel
     half zag. Op een telefoon is een dekwitte balk trouwens beter leesbaar
     dan matglas, dus hier verliezen we niets. */
  header{
    backdrop-filter:none; -webkit-backdrop-filter:none; background:#fff;
  }

  .navlinks{
    position:fixed; inset:0 0 0 auto; z-index:2; width:min(80vw,340px);
    background:#fff; flex-direction:column; align-items:stretch; gap:4px;
    padding:92px 24px 32px; box-shadow:-14px 0 34px rgba(50,20,70,.18);
    transform:translateX(100%); transition:transform var(--duur-mid) var(--uit);
    overflow-y:auto;
  }
  .navlinks.open{ transform:translateX(0) }
  .navlinks li{ border-bottom:1px solid var(--lijn) }
  .navlinks li.navcta{ border-bottom:none; margin-top:20px }
  .navlinks a{ display:block; font-size:1.1rem; padding:15px 2px; border-bottom:none }
  .navlinks .knop{ width:100% }
  .menuknop{ display:inline-flex; position:relative; z-index:3 }
  /* Onder de kopbalk (60), boven de vaste actiebalk (50). Zo dekt de sluier
     ook die balk af, en blijft het menupaneel er als enige bovenop. */
  .navbackdrop{
    display:block; position:fixed; inset:0; z-index:55; background:rgba(34,16,48,.4);
    opacity:0; pointer-events:none; transition:opacity var(--duur-mid) var(--uit);
  }
  .navbackdrop.open{ opacity:1; pointer-events:auto }

  /* vaste actiebalk onderaan: bellen en afspraak maken altijd bereikbaar */
  .vastebalk{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
    border-top:1px solid var(--lijn); padding:10px 14px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 24px rgba(50,20,70,.12);
  }
  .vastebalk .knop{ min-height:52px; padding:13px 12px; font-size:1rem }
  body{ padding-bottom:82px }
}

/* ---------- hero: alleen op de homepage ---------- */
.hero{
  position:relative; overflow:hidden; display:flex; align-items:center;
  min-height:clamp(500px, 64vh, 640px); background:var(--k2);
}
.hero img.hero-foto{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; object-position:center 22%;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(0deg, rgba(50,20,70,.96) 0%, rgba(50,20,70,.80) 34%, rgba(40,16,56,.52) 66%, rgba(40,16,56,.30) 100%),
    linear-gradient(90deg, rgba(40,16,56,.52) 0%, rgba(40,16,56,.16) 46%, rgba(40,16,56,0) 70%);
}
.hero .wrap{ position:relative; z-index:2; padding-top:64px; padding-bottom:64px }
.hero .eyebrow{ color:#fff }
.hero .eyebrow svg{ color:var(--k1-zacht) }
.hero h1{ color:#fff; max-width:15ch; margin-bottom:.4em }
.hero .lead{ color:rgba(255,255,255,.92); font-size:1.18rem; max-width:46ch }
.hero .merkteken{
  position:absolute; z-index:1; right:-70px; top:-70px; width:520px; height:auto;
  color:rgba(255,255,255,.08); pointer-events:none;
}
.hero-onder{
  display:flex; align-items:center; gap:10px; margin-top:22px;
  color:rgba(255,255,255,.82); font-size:.98rem;
}
.hero-onder svg{ width:20px; height:20px; color:var(--k1-zacht); flex:none }
@media (max-width:700px){
  .hero{ min-height:auto }
  .hero .wrap{ padding-top:84px; padding-bottom:40px }
  .hero .lead{ font-size:1.06rem }
}

/* ---------- pagekop: alle pagina's buiten de homepage, geen banner ---------- */
.pagekop{ position:relative; background:#fff; border-bottom:1px solid var(--lijn); overflow:hidden }
.pagekop .wrap{ position:relative; z-index:2; padding-top:52px; padding-bottom:52px }
.pagekop-grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:48px; align-items:end }
.pagekop h1{ font-size:clamp(1.95rem, 1.3rem + 2vw, 2.75rem); max-width:30ch; margin-bottom:.35em }
.pagekop .lead{ max-width:52ch; margin:0 }
.pagekop-actie{ display:flex; flex-direction:column; gap:12px; align-items:flex-start }
.pagekop .merkteken{
  position:absolute; z-index:1; right:-30px; bottom:-72px; width:260px; height:auto;
  color:rgba(122,76,141,.07); pointer-events:none;
}
@media (max-width:900px){
  .pagekop-grid{ grid-template-columns:1fr; gap:26px; align-items:start }
  .pagekop .wrap{ padding-top:40px; padding-bottom:40px }
}

/* ---------- sectiekop met het brilmotief als scheiding ---------- */
.sectiekop{ max-width:var(--smal); margin:0 0 40px }
.sectiekop.midden{ margin-left:auto; margin-right:auto; text-align:center }
.sectiekop.midden .eyebrow{ justify-content:center }
.sectiekop p{ margin-bottom:0 }
.brilregel{
  display:flex; align-items:center; gap:18px; margin:0 0 44px;
  color:var(--k1); opacity:.55;
}
.brilregel::before, .brilregel::after{ content:""; height:1px; background:var(--lijn); flex:1 }
.brilregel svg{ width:44px; height:auto; flex:none }

/* ---------- bewijsbalk: waarom u mij kunt vertrouwen ---------- */
.bewijs{ background:var(--k2); color:#fff }
.bewijs .wrap{ padding-top:38px; padding-bottom:38px }
.bewijs-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 }
.bewijs-item{
  display:flex; gap:14px; align-items:flex-start;
  padding:6px 26px; border-left:1px solid var(--lijn-donker);
}
.bewijs-item:first-child{ border-left:none; padding-left:0 }
.bewijs-item:last-child{ padding-right:0 }
.bewijs-item svg{ width:26px; height:26px; color:var(--k1-zacht); flex:none; margin-top:3px }
.bewijs-item b{ display:block; color:#fff; font-weight:600; font-size:1rem; line-height:1.4 }
.bewijs-item span{ display:block; color:rgba(255,255,255,.72); font-size:.92rem; line-height:1.45; margin-top:3px }
@media (max-width:1000px){
  .bewijs-grid{ grid-template-columns:1fr 1fr; gap:28px 0 }
  .bewijs-item:nth-child(odd){ border-left:none; padding-left:0 }
}
@media (max-width:620px){
  .bewijs-grid{ grid-template-columns:1fr; gap:24px }
  .bewijs-item{ border-left:none; padding-left:0 }
}

/* ---------- stappen: dit is een echte volgorde, dus genummerd ---------- */
.stappen{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; counter-reset:stap }
@media (max-width:860px){ .stappen{ grid-template-columns:1fr; gap:28px } }
.stap{ position:relative; padding-top:14px }
.stap-merk{
  display:flex; align-items:center; justify-content:center;
  width:54px; height:54px; margin-bottom:22px; border-radius:999px;
  background:var(--mist); border:1px solid var(--lijn);
  font-family:var(--serif); font-weight:600; font-size:1.4rem; line-height:1;
  color:var(--k1-diep);
}
.mist .stap-merk{ background:#fff }
.stap h3{ margin-bottom:.4em }
.stap p{ color:var(--grijs); margin-bottom:0 }

/* ---------- twee kaarten: particulier en zakelijk ---------- */
.tweeblok{ display:grid; grid-template-columns:1fr 1fr; gap:26px }
@media (max-width:860px){ .tweeblok{ grid-template-columns:1fr } }
.kaart{
  display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--lijn); border-radius:18px; padding:38px;
  transition:box-shadow var(--duur-mid) var(--uit), transform var(--duur-mid) var(--uit);
}
@media (hover:hover) and (pointer:fine){
  .kaart:hover{ box-shadow:var(--schaduw-zacht); transform:translateY(-2px) }
}
.kaart.donker{ background:var(--k2); border-color:var(--k2); color:#fff }
.kaart.donker h3{ color:#fff }
.kaart.donker p, .kaart.donker li{ color:rgba(255,255,255,.82) }
.kaart-lijst{ list-style:none; margin:0 0 4px; padding:0 }
.kaart-lijst li{
  position:relative; padding-left:30px; margin-bottom:.55em; color:var(--grijs); line-height:1.55;
}
.kaart-lijst li::before{
  content:""; position:absolute; left:0; top:.62em; width:16px; height:8px;
  border:1.6px solid var(--k1); border-radius:999px;
}
.kaart.donker .kaart-lijst li{ color:rgba(255,255,255,.86) }
.kaart.donker .kaart-lijst li::before{ border-color:var(--k1-zacht) }
.kaart .knopgroep{ margin-top:auto; padding-top:26px }
@media (max-width:700px){ .kaart{ padding:28px } }

/* ---------- montuurgalerij ---------- */
.montuurgalerij{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px }
.montuurgalerij div{ aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:var(--mist) }
.montuurgalerij img{ width:100%; height:100%; object-fit:cover }
@media (max-width:860px){ .montuurgalerij{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:460px){ .montuurgalerij{ grid-template-columns:repeat(2,1fr) } }

.tagrij{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 26px }
.tag{
  background:#fff; border:1.5px solid var(--lijn); color:var(--k2);
  font-weight:600; font-size:.95rem; padding:9px 20px; border-radius:999px;
}
.tag.gevuld{ background:var(--mist); border-color:var(--k1); color:var(--k1-diep) }

/* ---------- citaat over een foto ---------- */
.citaatvlak{ margin:0; position:relative; overflow:hidden; display:flex; align-items:center; min-height:42vh }
.citaatvlak img{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover }
.citaatvlak::after{ content:""; position:absolute; inset:0; z-index:1; background:rgba(34,16,48,.76) }
.citaatvlak .wrap{ position:relative; z-index:2; text-align:center; padding-top:64px; padding-bottom:64px }
.citaatvlak blockquote{
  margin:0 auto; max-width:24ch; color:#fff; font-family:var(--serif); font-weight:500;
  font-size:clamp(1.45rem, 1.1rem + 1.6vw, 2.2rem); line-height:1.32;
}
.citaatvlak figcaption{
  margin-top:20px; color:var(--k1-zacht); font-size:.88rem;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}

/* ---------- werkgebied: kaart naast de tekst ---------- */
.werkgebied-blok{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center }
@media (max-width:940px){ .werkgebied-blok{ grid-template-columns:1fr; gap:34px } }
a.kaartkader{ display:block; text-decoration:none; transition:box-shadow var(--duur-mid) var(--uit), transform var(--duur-mid) var(--uit) }
@media (hover:hover) and (pointer:fine){ a.kaartkader:hover{ transform:translateY(-2px) } }
.kaartkader{
  position:relative; border-radius:18px; overflow:hidden;
  border:1px solid var(--lijn); box-shadow:var(--schaduw-diep); background:var(--mist);
}
.kaartkader img{ width:100%; height:auto }
.kaartpil{
  position:absolute; top:18px; left:50%; transform:translateX(-50%);
  z-index:900; background:var(--k1); color:#fff; font-size:.88rem; font-weight:700;
  letter-spacing:.04em; padding:7px 18px; border-radius:999px;
  box-shadow:0 4px 14px rgba(50,20,70,.28);
}
.kaartnoot{ margin-top:14px; font-size:.88rem; color:var(--grijs) }

.puntlijst{ list-style:none; margin:30px 0 0; padding:0; display:flex; flex-direction:column; gap:22px }
.puntlijst li{ display:flex; gap:16px; align-items:flex-start }
.puntlijst .punt-icoon{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:46px; height:46px; border-radius:999px; background:var(--mist); color:var(--k1-diep);
}
.puntlijst .punt-icoon svg{ width:22px; height:22px }
.puntlijst b{ display:block; color:var(--k2); font-weight:600; font-size:1.04rem }
.puntlijst span{ display:block; color:var(--grijs); font-size:.98rem; line-height:1.5 }

.plaatsen{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 22px }
.plaats{
  background:#fff; border:1px solid var(--lijn); border-radius:999px;
  padding:9px 18px; font-size:.95rem; color:var(--grijs);
}

/* ---------- feiten ---------- */
.feitrij{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px }
.feit{
  flex:1 1 180px; background:var(--mist); border-radius:18px; padding:22px 24px;
  border-left:3px solid var(--k1);
}
.feit b{ display:block; font-family:var(--serif); font-size:1.55rem; color:var(--k1-diep); line-height:1.1 }
.feit span{ display:block; font-size:.94rem; color:var(--grijs); margin-top:4px }

/* ---------- vergoeding ---------- */
.vergoeding{
  background:var(--k2); color:#fff; border-radius:18px; padding:52px;
  display:grid; grid-template-columns:1.35fr .65fr; gap:44px; align-items:center;
}
.vergoeding h2{ color:#fff; margin-bottom:.5em }
.vergoeding p{ color:rgba(255,255,255,.84) }
@media (max-width:860px){ .vergoeding{ grid-template-columns:1fr; padding:32px; gap:28px } }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:40px } }
.belblok{
  background:var(--mist); border-radius:18px; padding:36px; border-top:4px solid var(--k1);
}
.belblok .telefoon{
  display:inline-flex; align-items:center; gap:12px; font-family:var(--serif);
  font-size:clamp(1.7rem,1.3rem + 1.6vw,2.2rem); font-weight:600;
  color:var(--k2); text-decoration:none; line-height:1.1; margin:6px 0 4px;
}
.belblok .telefoon svg{ width:1em; height:1em; color:var(--k1); flex:none }
@media (hover:hover){ .belblok .telefoon:hover{ color:var(--k1-diep) } }
.gegevens{ list-style:none; margin:28px 0 0; padding:26px 0 0; border-top:1px solid var(--lijn) }
.gegevens li{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; color:var(--grijs); font-size:1rem }
.gegevens li:last-child{ margin-bottom:0 }
.gegevens svg{ width:20px; height:20px; color:var(--k1); flex:none; margin-top:4px }
.gegevens a{ color:var(--k2); font-weight:600; text-decoration:none; text-underline-offset:3px }
@media (hover:hover){ .gegevens a:hover{ text-decoration:underline } }

form .veld{ margin-bottom:22px }
form label, form .veldlabel{ display:block; font-weight:600; font-size:1rem; color:var(--k2); margin:0 0 7px }
form .hulp{ display:block; font-weight:400; font-size:.92rem; color:var(--grijs); margin-top:-3px; margin-bottom:8px }
form input, form select, form textarea{
  width:100%; font-family:var(--sans); font-size:1.02rem; color:var(--inkt);
  padding:14px 16px; min-height:54px; background:#fff;
  border:1.5px solid #C9C0CF; border-radius:12px;
  transition:border-color var(--duur-kort) var(--uit);
}
form textarea{ min-height:120px; resize:vertical }
form input:hover, form select:hover, form textarea:hover{ border-color:var(--k1) }
form .keuzerij{ display:flex; flex-wrap:wrap; gap:10px }
form .keuze{ position:relative }
form .keuze input{
  position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;
}
form .keuze span{
  display:block; padding:12px 22px; min-height:48px; border-radius:999px;
  border:1.5px solid #C9C0CF; background:#fff; font-weight:600; font-size:.98rem; color:var(--k2);
  transition:background var(--duur-kort) var(--uit), border-color var(--duur-kort) var(--uit);
}
form .keuze input:checked + span{ background:var(--k1); border-color:var(--k1); color:#fff }
form .keuze input:focus-visible + span{ outline:3px solid var(--focus); outline-offset:3px }
.honingpot{ position:absolute; left:-9999px }
.formulier-noot{ font-size:.92rem; color:var(--grijs); margin-top:16px }

/* ---------- veelgestelde vragen ---------- */
.vragen{ max-width:880px; border-top:1px solid var(--lijn) }
.vragen details{ border-bottom:1px solid var(--lijn) }
.vragen summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 0; cursor:pointer; list-style:none;
  font-family:var(--serif); font-size:1.16rem; font-weight:600; color:var(--k2);
}
.vragen summary::-webkit-details-marker{ display:none }
.vragen summary::after{
  content:""; flex:none; width:14px; height:14px; margin-right:4px;
  border-right:2px solid var(--k1); border-bottom:2px solid var(--k1);
  transform:rotate(45deg) translateY(-3px);
  transition:transform var(--duur-mid) var(--uit);
}
.vragen details[open] summary::after{ transform:rotate(-135deg) translateY(-3px) }
@media (hover:hover){ .vragen summary:hover{ color:var(--k1-diep) } }
.vragen .antwoord{ padding:0 0 24px; color:var(--grijs) }
.vragen .antwoord p{ max-width:64ch }

/* ---------- slotoproep ---------- */
.slot{ text-align:center }
.slot h2{ max-width:19ch; margin-left:auto; margin-right:auto }
.slot p{ max-width:52ch; margin-left:auto; margin-right:auto; margin-bottom:30px }

/* ===================== FOOTER =====================
   Eén rustige, lichte footer met drie kolommen en één smalle regel eronder.
   De vorige versie had een lichte en een donkere verdieping met een aparte
   juridische balk: dat waren drie ritmes onder elkaar en dat las als rommel. */
footer{ background:var(--mist); border-top:1px solid var(--lijn); margin-top:0 }
.footer-hoofd{ padding:60px 0 0 }
.footer-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.15fr; gap:44px }
@media (max-width:940px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:40px 44px } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; gap:34px } }

/* Alle vier de kolommen beginnen op dezelfde lijn: de koprij is overal even
   hoog, of er nu een logo of een kopje in staat. Dat is wat de footer strak
   maakt; zonder die rij begint elke kolom op een andere hoogte. */
.footer-kop{ display:flex; align-items:center; height:30px; margin:0 0 22px }
.footer-kop h3{ margin:0 }
.footer-kop img{ height:34px; width:auto; margin:0 }
footer h3{
  font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--k1-diep);
}
.footer-tekst{ color:var(--grijs); font-size:1rem; margin:0 0 18px; max-width:38ch }
footer address{ font-style:normal }
.footer-lijst{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px }
.footer-lijst li{ line-height:1.45 }
.footer-lijst a, .footer-lijst span{ font-size:1rem; text-decoration:none }
.footer-lijst span{ color:var(--grijs) }
.footer-lijst a{ color:var(--k2); font-weight:600; text-underline-offset:3px }
@media (hover:hover){ .footer-lijst a:hover{ text-decoration:underline; color:var(--k1-diep) } }
.footer-knop{ margin-top:18px }

/* De kleine noot staat over de volle breedte, met een lijn die ook over de
   volle breedte loopt. */
.footer-noot{ margin-top:44px; padding:20px 0 26px; border-top:1px solid var(--lijn) }
.footer-noot p{ font-size:.82rem; line-height:1.55; color:#6E6579; max-width:88ch; margin:0 }

.footer-staart{ border-top:1px solid var(--lijn) }
.footer-staart .wrap{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px;
  padding-top:20px; padding-bottom:24px; font-size:.88rem; color:var(--grijs);
}
.footer-staart nav{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-right:auto }
.footer-staart nav a{ color:var(--grijs); text-decoration:none; text-underline-offset:3px }
@media (hover:hover){ .footer-staart nav a:hover{ color:var(--k2); text-decoration:underline } }
.nubez-door{
  display:inline-flex; align-items:center; gap:.45em; line-height:1;
  text-decoration:none; color:var(--k2); white-space:nowrap;
}
.nubez-door svg{ display:block; width:auto; flex:none }
.nubez-door .nubez-merk{ height:1.15em; aspect-ratio:174/106 }
.nubez-door .nubez-woord{ height:1em; aspect-ratio:406.78/129.27 }
@media (max-width:640px){
  .footer-staart .wrap{ flex-direction:column; align-items:flex-start; gap:14px }
  .footer-staart nav{ margin-right:0 }
}
.prototypenoot{
  font-size:.8rem; color:#7B7286; max-width:76ch;
  padding:18px 0 26px; border-top:1px solid var(--lijn);
}

/* ---------- beweging ----------
   Eén patroon voor de hele site: rustig omhoog en in beeld. 280ms, ease-out,
   uitsluitend transform en opacity, één keer per element. */
.reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity 280ms var(--uit), transform 280ms var(--uit);
}
.reveal.in-beeld{ opacity:1; transform:none }

/* het enige georkestreerde moment op de site: de homepage-kop komt scherp te
   staan, zoals bij een oogmeting. Eén keer, bij het laden, alleen daar. */
.scherp{ animation:scherpstellen 620ms var(--uit) both }
.scherp-traag{ animation-delay:120ms }
@keyframes scherpstellen{
  from{ opacity:0; filter:blur(9px); transform:translateY(10px) }
  to  { opacity:1; filter:blur(0);   transform:none }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .reveal{ opacity:1; transform:none; transition:none }
  .scherp{ animation:none }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ---------- afdrukken ---------- */
@media print{
  header, .vastebalk, .navbackdrop, .topbalk{ display:none }
  .hero::after{ display:none }
  body{ font-size:11pt; padding-bottom:0 }
}

/* ---------- interactieve werkgebiedkaart ----------
   De opmaak van Leaflet wordt hier naar de huisstijl getrokken. Zonder
   javascript blijft het vlak leeg en doet de plaatsenlijst eronder het werk. */
.kaartvlak{
  height:clamp(400px, 56vh, 560px); border-radius:18px; overflow:hidden;
  border:1px solid var(--lijn); background:var(--mist); box-shadow:var(--schaduw-diep);
}
.kaartvlak.is-klein{ height:clamp(320px, 40vh, 420px); box-shadow:none; border:0; border-radius:0 }
.kaartvlak .kaartval{
  margin:0; padding:34px; max-width:36ch; color:var(--grijs); font-size:1rem;
}
.kaartvlak.kaart-actief{ display:block }
/* De kaart op de homepage is op slot: geen slepen, geen zoomen, wel klikbaar. */


.leaflet-container{ background:var(--mist); font-family:var(--sans) }
.leaflet-control-zoom a{
  color:var(--k2) !important; font-weight:600;
  width:38px !important; height:38px !important; line-height:36px !important;
}
.leaflet-control-zoom{ border:1px solid var(--lijn) !important; border-radius:10px !important; overflow:hidden }
.leaflet-control-attribution{
  font-size:11px !important; background:rgba(255,255,255,.88) !important; color:var(--grijs) !important;
}
.leaflet-control-attribution a{ color:var(--k1-diep) !important }
.plaatsstip{
  display:block; width:11px; height:11px; border-radius:999px;
  background:var(--k1); border:2.5px solid #fff; box-shadow:0 1px 5px rgba(50,20,70,.4);
}
.plaatsstip.is-oss{ width:17px; height:17px; background:var(--k2); border-width:3px }
.leaflet-tooltip.plaatslabel{
  border:0; border-radius:8px; padding:4px 9px; font-size:13px; font-weight:600;
  color:var(--k2); background:rgba(255,255,255,.95); box-shadow:0 2px 10px rgba(50,20,70,.18);
}
.leaflet-tooltip.plaatslabel::before{ display:none }
.leaflet-tooltip.plaatslabel.label-oss{ font-size:15px; font-weight:700 }
@media (max-width:700px){
  .kaartvlak{ height:min(62vh, 440px) }
  .kaartvlak.is-klein{ height:min(52vh, 340px) }
  .leaflet-tooltip.plaatslabel:not(.label-oss){ display:none }
}

/* ---------- werkgebiedcontrole ----------
   Een rustig blok: wit op de lichte tint, dunne rand, zachte schaduw. Op een
   telefoon komt de knop onder het veld. */
.verborgen{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
button.plaats{
  font-family:var(--sans); font-weight:500; cursor:pointer; color:var(--k2);
  transition:border-color var(--duur-kort) var(--uit), background var(--duur-kort) var(--uit);
}
@media (hover:hover) and (pointer:fine){
  button.plaats:hover{ border-color:var(--k1); background:var(--mist) }
}
.checkblok{
  margin-top:44px; background:#fff; border:1px solid var(--lijn); border-radius:18px;
  padding:40px; box-shadow:var(--schaduw-zacht);
}
.checkblok h3{ font-size:1.45rem; margin-bottom:.35em }
.checkblok > p{ max-width:56ch; margin-bottom:26px }
.checkrij{ display:flex; gap:14px; align-items:stretch; max-width:620px }
.checkveld{ flex:1 1 auto; display:block }
.checkrij input{
  width:100%; height:100%; font-family:var(--sans); font-size:1.05rem; color:var(--inkt);
  padding:14px 18px; min-height:56px; background:#fff;
  border:1.5px solid #C9C0CF; border-radius:999px;
  transition:border-color var(--duur-kort) var(--uit);
}
.checkrij input::placeholder{ color:#8B8194 }
.checkrij input:hover{ border-color:var(--k1) }
.checkrij .knop{ flex:none; white-space:nowrap }
@media (max-width:620px){
  .checkblok{ padding:26px }
  .checkrij{ flex-direction:column; gap:12px }
  .checkrij .knop{ width:100% }
}

.checkuitslag{ margin-top:26px; border-radius:14px; padding:24px 26px; border:1px solid var(--lijn) }
.checkuitslag[hidden]{ display:none }
.checkuitslag p{ max-width:58ch }
.checkuitslag p:last-of-type{ margin-bottom:0 }
.checkuitslag .knopgroep{ margin-top:20px }
.checkkop{
  display:flex; align-items:flex-start; gap:11px; margin-bottom:.5em;
  font-family:var(--serif); font-size:1.22rem; font-weight:600; line-height:1.3; color:var(--k2);
}
.checkkop svg{ width:24px; height:24px; flex:none; margin-top:2px }
.checkbezig{ margin:0; color:var(--grijs) }
.checkuitslag.is-ja{ background:var(--mist); border-color:var(--k1-zacht) }
.checkuitslag.is-ja .checkkop{ color:var(--k1-diep) }
.checkuitslag.is-misschien{ background:#FBF9FB; border-color:var(--lijn) }
.checkuitslag.is-bezig{ background:#FBF9FB; padding:18px 26px }

/* ---------- foutmelding boven het formulier ---------- */
.formulierfout{
  margin:0 0 22px; padding:16px 20px; border-radius:14px;
  background:#FCF3F3; border:1px solid #E3C4C4; color:#7A2B2B;
  font-weight:600; font-size:1rem; max-width:none;
}
.formulierfout[hidden]{ display:none }