/* Computerreparatie Amersfoort — een werkplaats van Veenstra IT.
   Familie: warm papier, Veenstra-oranje, zachte vlakken. Eigen signatuur: de ophaalroute.
   Letters: Overpass (bewegwijzering) en Overpass Mono (haltes, prijzen). */
@font-face{font-family:"Overpass";src:url("../assets/fonts/overpass-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Overpass Mono";src:url("../assets/fonts/overpass-mono-var.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

:root{
  --papier:#F5F0E6;--papier-2:#ECE4D5;--papier-3:#E1D6C3;--wit:#FFFDF8;
  --inkt:#17181C;--grijs:#52535B;--grijs-2:#6E6F77;
  --oranje:#FF8514;--oranje-d:#EE7406;--oranje-inkt:#9E4600;--oranje-l:#FFE7CC;
  --lijn:#D9CEBB;--nacht:#1D1E23;--nacht-2:#2A2B31;
  --sans:"Overpass",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Overpass Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r:20px;--r-s:14px;--r-xs:10px;
  --schaduw:0 1px 2px rgba(60,40,15,.05),0 18px 40px -22px rgba(60,40,15,.28);
  --schaduw-groot:0 2px 4px rgba(60,40,15,.04),0 40px 80px -40px rgba(60,40,15,.40);
  --uit:cubic-bezier(.22,1,.36,1);
  --wrap:1560px;--gut:clamp(20px,3.2vw,56px);
  color-scheme:light;
}
@media (max-width:640px){:root{--gut:16px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:128px}
body{margin:0;background:var(--papier);color:var(--inkt);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,table,dl{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--oranje-d);outline-offset:3px;border-radius:4px}
::selection{background:var(--oranje);color:var(--inkt)}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-80px;z-index:90;background:var(--inkt);color:#fff;padding:.6rem 1rem;border-radius:var(--r-s);font-weight:700}
.skip:focus{top:12px}
.nw{white-space:nowrap}

h1,h2,h3{font-family:var(--sans);text-wrap:balance;color:var(--inkt)}
h1{font-size:clamp(2.2rem,1.4rem + 3.6vw,4rem);font-weight:800;line-height:1.02;letter-spacing:-.035em}
h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);font-weight:800;line-height:1.1;letter-spacing:-.025em}
h3{font-size:1.2rem;font-weight:700;line-height:1.3;letter-spacing:-.01em}
p,li{text-wrap:pretty}
.lead{font-size:clamp(1.1rem,1rem + .35vw,1.28rem);line-height:1.55;color:var(--grijs);max-width:38em}

/* Kicker: een halte op de lijn */
.kicker{display:inline-flex;align-items:center;gap:.55rem;font:700 .95rem/1.2 var(--sans);letter-spacing:-.005em;color:var(--oranje-inkt)}
.kicker::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--wit);box-shadow:inset 0 0 0 3px var(--oranje);flex:none}
.kicker--licht{color:var(--oranje)}
.kicker--licht::before{background:var(--nacht)}

/* Knoppen: zacht en rond met een oranje gloed, zoals sitepermaand.nl; drukken geeft direct respons */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:.85rem 1.55rem;border-radius:var(--r-s);background:var(--oranje);color:var(--inkt);font:700 1.02rem/1.1 var(--sans);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;box-shadow:0 10px 24px -12px rgba(255,110,0,.75),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .18s var(--uit),box-shadow .18s var(--uit),background-color .18s}
.knop:hover{background:#FF9633;transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(255,110,0,.8),inset 0 1px 0 rgba(255,255,255,.35)}
.knop:active{transform:scale(.97);transition-duration:.08s;box-shadow:0 6px 16px -10px rgba(255,110,0,.7)}
.knop--rand{background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(23,24,28,.16),0 6px 18px -12px rgba(60,40,15,.35)}
.knop--rand:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(23,24,28,.3),0 10px 22px -12px rgba(60,40,15,.4)}
.knop--rand:active{box-shadow:inset 0 0 0 1px rgba(23,24,28,.3)}
.knop--licht{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.knop--licht:hover{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px #fff}
.knop--klein{min-height:44px;padding:.55rem 1.05rem;font-size:.95rem;border-radius:12px}
.knop--breed{width:100%}
.knop[disabled]{opacity:.6;cursor:progress;transform:none}
.knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:1.75rem}
.knoppen__wa{font-weight:700;color:var(--oranje-inkt);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:rgba(255,133,20,.5);padding:.6rem 0;min-height:44px;display:inline-flex;align-items:center}
.knoppen__wa:hover{text-decoration-color:var(--oranje)}
.knoppen__noot{flex-basis:100%;margin:0;font-size:.95rem;color:var(--grijs)}
.knoppen__noot a{color:var(--inkt);font-weight:600;text-underline-offset:3px}
.link{color:var(--oranje-inkt);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

/* ---------- Kopbalk: logo, menu, bellen ---------- */
.balk{position:sticky;top:0;z-index:40;background:rgba(245,240,230,.97);border-bottom:1px solid rgba(217,206,187,.7)}
.balk__in{display:flex;align-items:center;gap:1.5rem;min-height:74px}
.merk{display:flex;align-items:center;gap:.85rem;text-decoration:none;min-width:0;flex:none}
.merk img{width:149px;height:auto}
.merk__sub{font:600 .66rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--grijs);padding-left:.85rem;border-left:2px dashed var(--lijn)}
.menu{display:flex;gap:.25rem;margin:0 auto}
.menu a{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 .7rem;border-radius:10px;font:600 .93rem/1 var(--sans);text-decoration:none;color:var(--grijs);transition:color .15s,background-color .15s}
.menu a:hover{color:var(--inkt);background:rgba(255,255,255,.6)}
.menu a[aria-current="page"]{color:var(--inkt)}
.menu a[aria-current="page"]::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--oranje)}
.balk__tel{font:700 1rem/1.2 var(--mono);text-decoration:none;display:flex;flex-direction:column;align-items:flex-end;flex:none}
.balk__tel-label{font:500 .66rem/1.2 var(--mono);color:var(--grijs);text-transform:uppercase;letter-spacing:.06em}
.haltebalk{display:none;border-top:1px solid rgba(217,206,187,.7)}
.haltebalk__in{position:relative;display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.haltebalk__in::-webkit-scrollbar{display:none}
.haltebalk a{position:relative;flex:none;display:flex;align-items:center;gap:.35rem;min-height:44px;padding:0 1.1rem 0 0;font:600 .9rem/1 var(--sans);text-decoration:none;color:var(--grijs)}
.haltebalk a::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--papier);box-shadow:inset 0 0 0 2px var(--grijs-2);flex:none;position:relative;z-index:1}
.haltebalk a:not(:last-child)::after{content:"";position:absolute;left:9px;right:0;top:50%;height:2px;background:var(--lijn);transform:translateY(-1px)}
.haltebalk a:not(:last-child){padding-right:1.3rem}
.haltebalk a span{position:relative;z-index:1;background:var(--papier);padding:0 .35rem 0 .1rem;line-height:1.6}
.haltebalk a[aria-current="page"]{color:var(--inkt)}
.haltebalk a[aria-current="page"]::before{background:var(--oranje);box-shadow:inset 0 0 0 2px var(--inkt)}
@media (max-width:1180px){.menu{display:none}.haltebalk{display:block}.merk{margin-right:auto}}
@media (max-width:860px){.balk__tel{display:none}}
@media (max-width:560px){.balk__knop{display:none}.balk__in{min-height:62px}.merk img{width:124px}.merk__sub{font-size:.6rem}}

.kruimel{display:flex;flex-wrap:wrap;gap:.4rem;padding-top:1.25rem;font:500 .8rem/1.4 var(--mono);color:var(--grijs)}
.kruimel a{color:var(--grijs);text-decoration:underline;text-underline-offset:3px}

/* ---------- Home: kop met kaart ---------- */
.start{padding-block:clamp(28px,4vw,56px) clamp(40px,5vw,72px)}
.start__in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
@media (min-width:980px){.start__in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.start h1 .oranje{color:var(--oranje-inkt)}
.start .lead{margin-top:1.25rem}
.start__feiten{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:1.75rem;padding:0;list-style:none;font:500 .86rem/1.4 var(--mono);color:var(--grijs)}
.start__feiten li{display:flex;gap:.5rem;align-items:baseline}
.start__feiten b{color:var(--inkt);font-weight:700}

.kaart{position:relative;margin:0;background:var(--wit);border-radius:var(--r);padding:clamp(10px,1.6vw,18px);box-shadow:var(--schaduw-groot)}
.kaart__svg{width:100%;height:auto}
.kaart__stil path{fill:var(--papier-2);stroke:var(--wit);stroke-width:2}
.kaart__hoevelaken path{fill:var(--oranje-l);stroke:var(--wit);stroke-width:2}
.kaart__wijk path{fill:var(--papier-3);stroke:var(--wit);stroke-width:2.4;transition:fill .2s}
.kaart__wijk:hover path,.kaart__wijk:focus-visible path,.kaart__wijk.is-actief path{fill:#FFD3A3}
.kaart__wijk:focus-visible{outline:none}
.kaart__wijk:focus-visible path{stroke:var(--inkt);stroke-width:3}
.kaart__route{fill:none;stroke:var(--oranje);stroke-width:5;stroke-linecap:round;stroke-dasharray:14 9}
.kaart__haltes circle{fill:var(--wit);stroke:var(--inkt);stroke-width:3}
.kaart__label{font:600 15px var(--mono);fill:var(--inkt);paint-order:stroke;stroke:rgba(255,253,248,.9);stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.kaart__label--groot{font-weight:700}
.kaart__label--werkplaats{font:700 16px var(--sans);text-anchor:middle}
.kaart__label--klein{font:500 13px var(--mono);text-anchor:middle;fill:var(--grijs)}
.kaart__werkplaats circle{fill:var(--wit);stroke:var(--oranje);stroke-width:3}
.kaart__legenda{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:10px 4px 2px;padding:0;list-style:none;font:500 .78rem/1.3 var(--mono);color:var(--grijs)}
.kaart__legenda li{display:flex;align-items:center;gap:.45rem}
.kaart__legenda i{display:inline-block;flex:none}
.leg-route{width:26px;height:0;border-top:4px dashed var(--oranje)}
.leg-halte{width:11px;height:11px;border-radius:50%;background:var(--wit);box-shadow:inset 0 0 0 3px var(--inkt)}
.leg-werk{width:14px;height:14px;border-radius:50%;background:var(--wit);box-shadow:inset 0 0 0 3px var(--oranje)}
@media (max-width:620px){.kaart__label{font-size:22px;stroke-width:6px}.kaart__label:not(.kaart__label--groot):not(.kaart__label--werkplaats):not(.kaart__label--klein){display:none}.kaart__label--werkplaats{font-size:24px}.kaart__label--klein{font-size:19px}.kaart__haltes circle{r:8}}

/* Route tekent zich bij binnenkomst, als de bezoeker beweging toestaat */
@media (prefers-reduced-motion:no-preference){
  .beweeg .kaart__route{animation:rit 2.6s var(--uit) .3s both;stroke-dasharray:1000;stroke-dashoffset:1000}
  .beweeg .kaart__route.is-klaar{animation:none;stroke-dasharray:14 9;stroke-dashoffset:0}
  .beweeg .kaart__haltes circle{animation:halte .4s var(--uit) both;transform-box:fill-box;transform-origin:center}
  @keyframes rit{to{stroke-dashoffset:0}}
  @keyframes halte{from{transform:scale(0)}to{transform:scale(1)}}
}

/* ---------- De rit: vijf haltes van melding tot terugbrengen ---------- */
.sectie{padding-block:clamp(56px,7vw,104px)}
.sectie--vlak{padding-block:clamp(16px,2vw,24px)}
.sectie--vlak > .wrap{background:var(--papier-2);border-radius:clamp(20px,3vw,32px);padding:clamp(36px,5vw,72px) clamp(20px,4vw,56px)}
@media (min-width:1100px){.sectie--vlak > .wrap{max-width:calc(var(--wrap) + 80px);width:calc(100% - 2 * var(--gut) + 80px)}}
.sectie__kop{display:grid;gap:.9rem;max-width:46rem;margin-bottom:clamp(28px,4vw,48px)}
.sectie__kop .lead{font-size:1.1rem}
.rit{list-style:none;padding:0;margin:0;display:grid;gap:0;counter-reset:rit}
.rit li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:1rem;padding-bottom:1.75rem;counter-increment:rit}
.rit li::before{content:counter(rit);grid-row:1/3;width:44px;height:44px;border-radius:50%;background:var(--wit);box-shadow:inset 0 0 0 3px var(--inkt);display:grid;place-items:center;font:700 1rem/1 var(--mono);position:relative;z-index:1}
.rit li::after{content:"";position:absolute;left:20px;top:44px;bottom:0;width:4px;background:repeating-linear-gradient(var(--oranje) 0 12px,transparent 12px 20px)}
.rit li:last-child::after{display:none}
.rit li:last-child::before{background:var(--oranje)}
.rit h3{padding-top:.55rem}
.rit p{color:var(--grijs);max-width:34em}
.rit__prijs{display:inline-block;margin-top:.35rem;font:700 .85rem/1.3 var(--mono);color:var(--oranje-inkt)}
@media (min-width:900px){
  .rit{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 1.25rem}
  .rit li{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;gap:.6rem;padding-bottom:0}
  .rit li::before{grid-row:auto}
  .rit li::after{left:44px;right:-1.25rem;top:20px;bottom:auto;width:auto;height:4px;background:repeating-linear-gradient(90deg,var(--oranje) 0 12px,transparent 12px 20px)}
  .rit h3{padding-top:.3rem}
}

/* ---------- Dienstregeling: wat we repareren ---------- */
.regeling{width:100%;border-collapse:separate;border-spacing:0;font-size:1rem;background:var(--wit);border-radius:var(--r);overflow:hidden;box-shadow:var(--schaduw)}
.regeling caption{caption-side:top;text-align:left;font:600 .78rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--grijs);padding:0 0 .7rem}
.regeling th,.regeling td{padding:.85rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--papier-2)}
.regeling thead th{font:600 .74rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--grijs);background:var(--papier-2);border-bottom:0}
.regeling tbody th{font-weight:600}
.regeling td:last-child,.regeling thead th:last-child{text-align:right}
@media (min-width:480px){.regeling td:last-child{white-space:nowrap}}
@media (max-width:479px){.regeling th,.regeling td{padding:.75rem .7rem}}
.regeling td{font:700 1rem/1.4 var(--mono)}
.regeling tbody tr:last-child th,.regeling tbody tr:last-child td{border-bottom:0}
.regeling small{display:block;font:400 .85rem/1.45 var(--sans);color:var(--grijs);margin-top:.2rem}
.regeling a{color:var(--inkt);text-decoration-color:var(--oranje);text-decoration-thickness:2px;text-underline-offset:3px}
.regeling--lijst td:last-child{font-family:var(--mono)}

.diensten{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,56px)}
@media (min-width:960px){.diensten{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:start}.diensten .sectie__kop{position:sticky;top:140px}}
.klachten{list-style:none;padding:0;margin:0;border-top:2px solid var(--inkt)}
.klachten li{border-bottom:1px solid var(--lijn)}
.klachten a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem 1rem;align-items:baseline;padding:1rem .25rem;text-decoration:none;transition:background-color .15s}
.klachten a{border-radius:var(--r-xs);padding-inline:.9rem}
.klachten a:hover{background:var(--wit);box-shadow:var(--schaduw)}
.klachten strong{font-size:1.12rem;font-weight:700;letter-spacing:-.01em}
.klachten span{grid-column:1;color:var(--grijs);font-size:.96rem}
.klachten em{grid-column:2;grid-row:1/3;align-self:center;font:700 .85rem/1.2 var(--mono);font-style:normal;color:var(--oranje-inkt);white-space:nowrap}

/* ---------- Eerlijk oordeel ---------- */
.oordeel{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:center}
@media (min-width:900px){.oordeel{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.oordeel__som{background:var(--nacht);color:#fff;border-radius:var(--r);padding:clamp(22px,3vw,36px);font-family:var(--mono)}
.oordeel__som p{color:#D8D6D0;font:500 .85rem/1.5 var(--mono);text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem}
.oordeel__som dl{display:grid;gap:.1rem}
.oordeel__som div{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px dashed rgba(255,255,255,.22)}
.oordeel__som dt{color:#EEEAE2}
.oordeel__som dd{margin:0;font-weight:700;text-align:right}
.oordeel__som div:last-child{border-bottom:0}
.oordeel__som .is-nul dd{color:var(--oranje)}
.tekst{max-width:40em}
.tekst > * + *{margin-top:1rem}
.tekst ul,.tekst ol{padding-left:1.25rem}
.tekst li + li{margin-top:.45rem}
.tekst li::marker{color:var(--oranje-d)}
.tekst a{color:var(--oranje-inkt);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.tekst strong{font-weight:700}

/* ---------- Wie ---------- */
.wie{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
@media (min-width:900px){.wie{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.wie figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--papier-2);box-shadow:var(--schaduw)}
.wie figcaption{font:500 .8rem/1.4 var(--mono);color:var(--grijs);padding:.7rem .9rem;background:var(--wit)}
.keurmerken{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;padding:0;list-style:none}
.keurmerken li{font:600 .8rem/1.2 var(--mono);padding:.45rem .7rem;border-radius:var(--r-s);background:var(--wit);box-shadow:inset 0 0 0 1px var(--lijn)}

/* ---------- Wijkindex: richtingborden ---------- */
.wijkindex{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0;list-style:none}
.wijkindex a{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem .9rem .45rem;border-radius:999px;background:var(--wit);box-shadow:inset 0 0 0 1px rgba(23,24,28,.14);font:700 .95rem/1 var(--sans);text-decoration:none;transition:background-color .15s,transform .15s var(--uit)}
.wijkindex a::after{content:"";width:.5em;height:.5em;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);margin-left:.1rem}
.wijkindex a:hover{background:var(--oranje);transform:translateY(-1px)}

/* ---------- Pagina's: kop, blokken, borden, vragen ---------- */
.kop{padding-block:clamp(20px,3vw,40px) clamp(32px,4vw,56px);display:grid;grid-template-columns:minmax(0,1fr);gap:0 clamp(24px,3vw,48px)}
.kop .knoppen{margin-top:1.75rem}
.kop > .kop__bord{margin-top:2rem}
.kop > :not(.kop__bord){grid-column:1}
.kop h1{margin-top:.9rem;max-width:18em}
.kop .lead{margin-top:1.1rem}
@media (min-width:980px){.kop.heeft-bord{grid-template-columns:minmax(0,1fr) 320px;align-items:start}.kop.heeft-bord > .kop__bord{grid-column:2;grid-row:1/span 5;margin-top:2.4rem}}
.kop > .kicker{margin:0}
.kop__bord{background:var(--wit);border-radius:var(--r);box-shadow:var(--schaduw);padding:1.1rem 1.25rem;align-self:start}
.kop__bord dl{display:grid;gap:0}
.kop__bord div{display:grid;gap:.1rem;padding:.7rem 0;border-bottom:1px dashed var(--lijn)}
.kop__bord div:first-child{padding-top:0}
.kop__bord div:last-child{border-bottom:0;padding-bottom:0}
.kop__bord dt{font:600 .72rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--grijs)}
.kop__bord dd{margin:0;font-weight:700}

.blok{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem 3rem;padding-block:clamp(28px,3.4vw,48px);border-top:1px solid var(--lijn)}
.kop + .blok{border-top:0}
@media (min-width:900px){.blok{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr)}.blok > h2{grid-column:1;position:sticky;top:140px;align-self:start}.blok > :not(h2){grid-column:2}}
.blok > h2{font-size:clamp(1.35rem,1.1rem + .9vw,1.85rem)}
.blok .regeling{margin-top:.5rem}
.blok h3{margin-top:1.4rem}

.bord{margin-block:clamp(8px,1.5vw,16px)}
.bord > *{max-width:46rem}
.bord{background:var(--wit);border-radius:var(--r);box-shadow:var(--schaduw),inset 0 0 0 1px rgba(23,24,28,.12);padding:1.15rem 1.35rem 1.25rem;position:relative;overflow:hidden}
.bord::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;border-radius:var(--r) 0 0 var(--r);background:repeating-linear-gradient(-45deg,var(--oranje) 0 8px,var(--inkt) 8px 16px)}
.bord{padding-left:2rem}
.bord__kop{font:700 .82rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.35rem}
.wrap.bord{max-width:none;width:auto;margin-inline:max(var(--gut),calc((100% - var(--wrap)) / 2 + var(--gut)))}
.wrap.bord{padding-left:2rem}

.vragen{padding-block:clamp(36px,4vw,64px);border-top:1px solid var(--lijn)}
.vragen > h2{margin-bottom:1.25rem;font-size:clamp(1.35rem,1.1rem + .9vw,1.85rem)}
.vraag{border-bottom:1px solid var(--lijn);max-width:52rem}
.vraag:first-of-type{border-top:2px solid var(--inkt)}
.vraag summary{display:flex;justify-content:space-between;gap:1rem;align-items:center;min-height:56px;padding:.9rem 0;font-weight:700;font-size:1.08rem;cursor:pointer;list-style:none}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(23,24,28,.35);background:linear-gradient(var(--inkt),var(--inkt)) center/12px 2px no-repeat,linear-gradient(var(--inkt),var(--inkt)) center/2px 12px no-repeat;transition:transform .2s var(--uit)}
.vraag[open] summary::after{background:var(--oranje) linear-gradient(var(--inkt),var(--inkt)) center/12px 2px no-repeat;transform:rotate(180deg)}
.vraag .tekst{padding:0 0 1.2rem;color:var(--grijs)}
.vraag .tekst a{color:var(--oranje-inkt)}

/* Verder lezen: drie haltes */
.verder{padding-block:clamp(32px,4vw,56px);border-top:1px solid var(--lijn)}
.verder__kop{font:600 .78rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--grijs);margin-bottom:1rem}
.verder__lijn{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
@media (min-width:760px){.verder__lijn{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;position:relative}.verder__lijn::before{content:"";position:absolute;left:8px;right:8px;top:27px;height:3px;background:repeating-linear-gradient(90deg,var(--oranje) 0 12px,transparent 12px 20px)}}
.verder__lijn a{position:relative;display:flex;align-items:center;gap:.75rem;min-height:60px;padding:.9rem 1.1rem;border-radius:var(--r-s);background:var(--wit);box-shadow:var(--schaduw);font-weight:700;text-decoration:none;transition:box-shadow .15s}
.verder__lijn a:hover{box-shadow:inset 0 0 0 2px var(--oranje),var(--schaduw)}
.verder__stip{width:14px;height:14px;border-radius:50%;background:var(--wit);box-shadow:inset 0 0 0 3px var(--oranje);flex:none}

/* Oproep */
.oproep{margin:clamp(16px,3vw,40px) auto clamp(40px,5vw,72px);max-width:calc(var(--wrap) + 80px);width:calc(100% - 2 * var(--gut));border-radius:clamp(20px,3vw,32px);background-color:var(--nacht);background-image:radial-gradient(120% 140% at 100% 0%,#3a2a1c 0%,var(--nacht) 55%);color:#fff;padding-block:clamp(40px,5vw,72px);position:relative;overflow:hidden}
.oproep::before{content:"";position:absolute;left:clamp(20px,4vw,56px);right:clamp(20px,4vw,56px);top:0;height:4px;border-radius:0 0 4px 4px;background:repeating-linear-gradient(90deg,var(--oranje) 0 18px,transparent 18px 30px)}
.oproep__in{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:end}
@media (min-width:900px){.oproep__in{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.oproep h2{color:#fff;margin-top:.8rem}
.oproep p{color:#D8D6D0;margin-top:1rem;max-width:36em}
.oproep__acties{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center}
.oproep__wa{color:var(--oranje);font-weight:700;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:4px}

/* Voet */
.voet{background:var(--papier-2);padding-block:clamp(40px,5vw,72px) 0;font-size:.96rem}
.voet__in{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem}
@media (min-width:900px){.voet__in{grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr)}}
.voet__adres img{margin-bottom:1.25rem}
.voet__adres p + p{margin-top:.9rem}
.voet__adres a{text-underline-offset:3px}
.voet__kop{font:600 .75rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--grijs);margin:0 0 .7rem}
.voet__kop:not(:first-child){margin-top:1.75rem}
.voet__wijken,.voet__links{display:flex;flex-wrap:wrap;gap:.1rem 0}
.voet__wijken a,.voet__links a{display:inline-flex;align-items:center;min-height:36px;padding-right:.95rem;text-decoration:none}
.voet__wijken a::before{content:"";width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--oranje-d);margin-right:.4rem}
.voet__wijken a:hover,.voet__links a:hover{text-decoration:underline;text-underline-offset:3px}
.voet__zus{margin-top:1.75rem;color:var(--grijs);max-width:44em}
.voet__zus a{color:var(--inkt);font-weight:600}
.voet__onder{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;padding-block:1.25rem calc(1.25rem + env(safe-area-inset-bottom));margin-top:2.5rem;border-top:1px solid var(--lijn);font:500 .8rem/1.5 var(--mono);color:var(--grijs)}
.voet__onder a{text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.voet__onder a:hover{text-decoration:underline}
.voet__bron{flex-basis:100%}

/* Plakbalk op de telefoon */
.plakbalk{display:none}
@media (max-width:760px){
  .plakbalk{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:6px;position:fixed;left:0;right:0;bottom:0;z-index:45;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(29,30,35,.96);transform:translateY(0);transition:transform .25s var(--uit)}
  .plakbalk a{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:48px;border-radius:var(--r-s);color:#fff;font-weight:700;text-decoration:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
  .plakbalk svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
  .plakbalk__hoofd{background:var(--oranje);color:var(--inkt)!important;box-shadow:none!important}
  .plakbalk.is-weg{transform:translateY(110%)}
  body:has(.plakbalk){padding-bottom:72px}
}

/* ---------- Ophalen: wijkkaarten ---------- */
.wijken{display:grid;gap:1px;background:var(--lijn);border-radius:var(--r);overflow:hidden;box-shadow:var(--schaduw)}
@media (min-width:700px){.wijken{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.wijken{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wijk{background:var(--wit);padding:1.1rem 1.2rem 1.2rem;scroll-margin-top:140px}
.wijk:target{background:var(--oranje-l)}
.wijk h3{display:flex;align-items:center;gap:.55rem}
.wijk h3::before{content:"";width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 3px var(--inkt);flex:none}
.wijk p{color:var(--grijs);font-size:.95rem;margin-top:.35rem}
.wijk .wijk__buurt{font:500 .78rem/1.45 var(--mono);color:var(--grijs-2);margin-top:.5rem}

/* ---------- Rekenhulp repareren of vervangen ---------- */
.reken{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,40px);background:var(--wit);border-radius:var(--r);box-shadow:var(--schaduw);padding:clamp(18px,3vw,36px)}
@media (min-width:920px){.reken{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.reken fieldset{border:0;padding:0;margin:0 0 1.25rem}
.reken legend,.veld > label,.veld > span{display:block;font-weight:700;margin-bottom:.45rem}
.keuzes{display:flex;flex-wrap:wrap;gap:.5rem}
.keuzes label{position:relative}
.keuzes input{position:absolute;opacity:0;inset:0;cursor:pointer}
.keuzes span{display:inline-flex;align-items:center;min-height:44px;padding:.5rem .9rem;border-radius:var(--r-s);box-shadow:inset 0 0 0 1.5px var(--lijn);background:var(--papier);font-weight:600;cursor:pointer;transition:box-shadow .15s,background-color .15s}
.keuzes input:checked + span{background:var(--oranje);box-shadow:inset 0 0 0 2px var(--inkt)}
.keuzes input:focus-visible + span{outline:3px solid var(--oranje-d);outline-offset:2px}
.reken__uitkomst{background:var(--papier);border-radius:var(--r);padding:clamp(18px,2.4vw,28px);align-self:start}
.reken__uitkomst[data-kleur="groen"]{box-shadow:inset 6px 0 0 #2F8F5B}
.reken__uitkomst[data-kleur="oranje"]{box-shadow:inset 6px 0 0 var(--oranje)}
.reken__uitkomst[data-kleur="rood"]{box-shadow:inset 6px 0 0 #B23A1B}
.reken__kop{font:700 1.4rem/1.2 var(--sans);letter-spacing:-.02em}
.reken__uitkomst p{margin-top:.75rem;color:var(--grijs)}
.reken__uitkomst .regels{font:500 .82rem/1.5 var(--mono);color:var(--grijs)}

/* ---------- Formulieren en planner ---------- */
.formulier{display:grid;gap:1.1rem;max-width:40rem}
.veld{display:grid;gap:.1rem}
.veld input,.veld textarea,.veld select{width:100%;min-height:50px;padding:.7rem .85rem;border-radius:var(--r-s);border:1.5px solid #B9AE9B;background:var(--wit);font-size:1rem;transition:border-color .15s,box-shadow .15s}
.veld textarea{min-height:120px;resize:vertical}
.veld input:focus,.veld textarea:focus,.veld select:focus{outline:none;border-color:var(--inkt);box-shadow:0 0 0 3px rgba(255,133,20,.35)}
.veld small{font-size:.85rem;color:var(--grijs);margin-top:.25rem}
.veld--rij{display:grid;gap:1.1rem}
@media (min-width:640px){.veld--rij{grid-template-columns:1fr 1fr}}
.verplicht{color:var(--oranje-inkt)}
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.melding{padding:.9rem 1rem;border-radius:var(--r-s);background:var(--papier-2);font-weight:600}
.melding.is-fout{background:#FBE3DA;color:#7A2310}
.melding.is-goed{background:#E0F1E6;color:#1D5C38}
.melding:empty{display:none}

.plan{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,40px)}
@media (min-width:980px){.plan{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:start}}
.plan__stap{background:var(--wit);border-radius:var(--r);box-shadow:var(--schaduw);padding:clamp(18px,2.6vw,30px)}
.plan__stap + .plan__stap{margin-top:1rem}
.plan__stapkop{display:flex;align-items:center;gap:.7rem;font-weight:800;font-size:1.2rem;margin-bottom:1rem}
.plan__stapkop span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--inkt);color:#fff;font:700 .9rem/1 var(--mono);flex:none}
.soorten{display:grid;gap:.75rem}
@media (min-width:600px){.soorten{grid-template-columns:1fr 1fr}}
@media (min-width:760px){.soorten--drie{grid-template-columns:repeat(3,1fr)}}
.soort{position:relative}
.soort input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.soort span{display:grid;gap:.25rem;height:100%;padding:1rem 1.1rem;border-radius:var(--r-s);box-shadow:inset 0 0 0 1.5px var(--lijn);background:var(--papier);cursor:pointer;transition:box-shadow .15s,background-color .15s}
.soort strong{font-size:1.05rem}
.soort em{font-style:normal;color:var(--grijs);font-size:.92rem}
.soort input:checked + span{background:var(--oranje-l);box-shadow:inset 0 0 0 2.5px var(--inkt)}
.soort input:focus-visible + span{outline:3px solid var(--oranje-d);outline-offset:2px}
.dagen{display:grid;gap:1rem}
.dag__kop{font:700 .82rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.45rem}
.tijden{display:flex;flex-wrap:wrap;gap:.5rem}
.tijd{min-height:44px;padding:.5rem .85rem;border-radius:var(--r-s);border:0;background:var(--papier);box-shadow:inset 0 0 0 1.5px var(--lijn);font:600 .95rem/1 var(--mono);cursor:pointer;transition:box-shadow .15s,background-color .15s}
.tijd:hover{box-shadow:inset 0 0 0 2px var(--inkt)}
.tijd[aria-pressed="true"]{background:var(--oranje);box-shadow:inset 0 0 0 2px var(--inkt)}
.plan__zij{display:grid;gap:1rem}
@media (min-width:980px){.plan__zij{position:sticky;top:140px}}
.plan__gekozen{font-weight:700;padding:.75rem 1rem;border-radius:var(--r-s);background:var(--oranje-l)}
.laden{color:var(--grijs);font-style:normal}

/* Contact */
.contactraster{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,48px)}
@media (min-width:960px){.contactraster{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:start}}
.kanalen{display:grid;gap:.75rem}
.kanaal{display:grid;gap:.15rem;padding:1rem 1.15rem;border-radius:var(--r);background:var(--wit);box-shadow:var(--schaduw);text-decoration:none}
.kanaal span{font:600 .72rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--grijs)}
.kanaal strong{font-size:1.15rem}
a.kanaal:hover{box-shadow:inset 0 0 0 2px var(--inkt)}

/* Klein, eenvoudig binnenkomen */
@media (prefers-reduced-motion:no-preference){
  .beweeg .opkomst{opacity:0;transform:translateY(14px);transition:opacity .6s var(--uit),transform .6s var(--uit)}
  .beweeg .opkomst.is-zichtbaar{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* 404 en bedankt */
.leeg{padding-block:clamp(48px,8vw,120px);max-width:44rem}
.leeg h1{margin-top:1rem}
.leeg p{margin-top:1rem;color:var(--grijs)}

@media print{.balk,.plakbalk,.oproep,.verder,.knoppen{display:none}body{background:#fff}}

.plan-sectie,.contactraster{padding-bottom:clamp(48px,6vw,88px)}
.regeling th{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}

/* ---------- Held: de familie achter de werkplaats ---------- */
.held{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(560px,44vw,720px);display:grid;align-items:center}
.held__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 25%;z-index:-2}
.held::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--papier) 0%,var(--papier) 36%,rgba(245,240,230,.85) 39%,rgba(245,240,230,0) 47%)}
@media (min-width:1600px){.held__foto img{left:36%;width:64%;object-position:85% 25%}}
.held::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:-1;background:linear-gradient(transparent,rgba(245,240,230,.9))}
.held__in{padding-block:clamp(28px,3.5vw,56px)}
.held__tekst{max-width:500px}
.held__van{display:inline-flex;align-items:center;gap:.6rem;padding:.35rem .9rem .35rem .4rem;border-radius:999px;background:rgba(255,255,255,.85);box-shadow:var(--schaduw);font-weight:600;font-size:.95rem;color:var(--inkt)}
.held__van img{width:30px;height:30px;border-radius:50%}
.held h1{margin-top:1.1rem;font-size:clamp(2.3rem,1.4rem + 2.6vw,3.6rem)}
.held h1 span{color:var(--oranje-inkt)}
.held .lead{margin-top:1.2rem;color:#2E2F35}
.held__namen{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,32px);padding:.5rem .9rem;border-radius:12px;background:rgba(255,255,255,.88);box-shadow:var(--schaduw);font-size:.85rem;line-height:1.35;margin:0}
.held__namen strong{display:block}
@media (min-width:1100px) and (max-width:1599px){
  .held{min-height:0}
  .held::before,.held::after{display:none}
  .held__foto{position:absolute;z-index:0;top:50%;transform:translateY(-50%);right:max(var(--gut),calc((100% - var(--wrap)) / 2 + var(--gut)));width:min(50%,780px);aspect-ratio:900/671;border-radius:28px;overflow:hidden;box-shadow:var(--schaduw-groot)}
  .held__foto img{z-index:0;object-position:50% 30%}
  .held__tekst{max-width:min(580px,45%)}
  .held__namen{display:none}
}
@media (max-width:1099px){
  .held{display:block;min-height:0}
  .held::before,.held::after{display:none}
  .held__foto img{position:static;height:auto;aspect-ratio:1400/622;object-position:center}
  .held__in{margin-top:-64px;padding-block:0 8px}
  .held__tekst{max-width:720px;background:var(--wit);border-radius:var(--r);box-shadow:var(--schaduw-groot);padding:clamp(22px,4vw,40px) clamp(20px,4vw,44px) clamp(24px,4vw,40px)}
  .held__namen{display:block;top:calc(44.43vw - 64px - 62px);bottom:auto;right:14px;font-size:.8rem;padding:.4rem .75rem}
}
@media (max-width:759px){
  .held__foto img{aspect-ratio:900/671}
  .held__in{margin-top:-56px}
  .held__namen{top:calc(74.56vw - 56px - 58px);right:10px;font-size:.74rem;line-height:1.3}
}

/* Vertrouwen direct onder de held */
.vertrouwen{padding-block:clamp(8px,2vw,20px) clamp(24px,3vw,40px)}
.vertrouwen__lijst{list-style:none;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.vertrouwen__lijst li{display:flex;align-items:center;gap:.75rem;padding:14px 16px;border-radius:var(--r-s);background:var(--wit);box-shadow:var(--schaduw)}
.vertrouwen__lijst strong{display:block;font-size:1.15rem;letter-spacing:-.02em;line-height:1.1}
.vertrouwen__lijst span{display:block;font-size:.86rem;line-height:1.35;color:var(--grijs)}
.vertrouwen__lijst img{width:30px;height:30px;flex:none}
.vertrouwen__lijst a{text-decoration:none}
.sterren{color:var(--oranje-d);letter-spacing:1px;font-size:.9rem}

/* Werkgebied: kaart naast tekst */
.gebied{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
@media (min-width:980px){.gebied{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.gebied .wijkindex{margin-top:1.25rem}
.keuzes-drie{display:grid;gap:12px;margin-top:1.5rem}
.keuze-kaart{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .9rem;align-items:start;padding:16px 18px;border-radius:var(--r-s);background:var(--wit);box-shadow:var(--schaduw);text-decoration:none;transition:transform .18s var(--uit),box-shadow .18s var(--uit)}
.keuze-kaart:hover{transform:translateY(-2px);box-shadow:var(--schaduw-groot)}
.keuze-kaart b{grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--oranje-l);color:var(--oranje-inkt);font:800 1rem/1 var(--sans)}
.keuze-kaart strong{font-size:1.08rem}
.keuze-kaart span{color:var(--grijs);font-size:.95rem}
.keuze-kaart--hoofd{box-shadow:inset 0 0 0 2px var(--oranje),var(--schaduw)}
.keuze-kaart--hoofd b{background:var(--oranje);color:var(--inkt)}

@media (max-width:400px){.knoppen .knop{white-space:normal;text-align:center;width:100%}}
@media (max-width:360px){.held__van{font-size:.84rem;white-space:nowrap}.held__van img{width:26px;height:26px}}