/* BOEK-SPRONG-20260923 — sticky kop dekt anders de rekentitel af. */
#reken,#boek-widget{scroll-margin-top:88px}
/* Variabelen van de rekenmodule, alleen binnen #reken zodat de huisstijl van de site
   onaangeroerd blijft. --goud en --lijn bewust NIET overgenomen: die haalt de calculator
   van de site zelf, zodat hij bij de rest past. */
#reken{
  --bg:#0B0B0D;
  /* CONTRAST-20260910 — was #8B8880; dat is dezelfde kleur als --grijs2 in styles.css
     en die haalde op het lichtste paneel maar 4,23:1. Beide tokens meeverschoven naar
     #908D85: op --vlak 5,49:1, op --vlak2 5,11:1, op --bg 5,93:1. */
  --dof:#908D85;
  --dof2:#6E6C66;
  --f:"Montserrat",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --goud2:#7A6330;
  --m:ui-monospace,"SF Mono",Menlo,monospace;
  --tekst:#F3F1EC;
  --vlak:#15151A;
  --vlak2:#1C1C22;
}
html.taxi-dag #reken{
  --bg:#FFFcf7;
  --dof:#5C5850;
  --dof2:#6A665C;
  --goud2:#6E5410;
  --tekst:#1A1814;
  --vlak:#F7F3EA;
  --vlak2:#EFEBE0;
}
html.taxi-dag #reken .knop{background:#C9A24A;color:#14120E}
html.taxi-dag #reken .knop:hover{background:#D4B05C}

/* Opmaak van de rekenmodule, overgenomen uit /amstelland op 25-08-2026.
   Alles is onder #reken gescope't: de calculator gebruikt generieke klassenamen
   (.wrap, .lead, .knop) die deze site zelf óók gebruikt. Zonder die scoping zou
   het overnemen de opmaak van de rest van de site overschrijven. */
#reken .belbalk .ic svg{width:20px;height:20px;display:block}
#reken .belbalk .ic{display:block;color:currentColor}
#reken .wrap{max-width:1140px;margin:0 auto;padding:0 clamp(1rem,4vw,2.2rem)}

/* REKENKAART-BEGRENZEN-20260904
 *
 * De regel hierboven kwam mee uit /amstelland en gaat ervan uit dat er BINNEN de calculator
 * een .wrap-element zit. Dat is hier niet zo: gemeten 04-09 in de browser staan er nul
 * .wrap-elementen in #reken (directe kinderen: h2 | p | form | div | div.uitslag). De
 * bedoelde begrenzing van 1140px raakte dus niets — een regel die netjes in het bestand
 * staat en aantoonbaar niets doet.
 *
 * Gevolg op PC: #reken is zelf de kaart (donker vlak, gouden rand, 14px ronding) en die liep
 * van rand tot rand. Gemeten op 1440px: kaart x=0 breed=1440, terwijl de tekst van de pagina
 * in een kolom van 704px staat. De twee adresvelden werden daardoor 595px breed — voor een
 * straatnaam belachelijk veel, en de kaart stak links en rechts ver buiten het artikel.
 *
 * De begrenzing staat nu op #reken zelf, met de breedte die de site al bedoelde. De sectie
 * eromheen is doorzichtig en blijft dus gewoon vollebreedte; alleen de kaart is begrensd. */
#reken{max-width:1140px;margin-inline:auto}
#reken .lead{font-size:clamp(1.05rem,2.2vw,1.22rem);color:var(--dof);max-width:60ch}
#reken .grid{display:grid;gap:18px}
#reken .g4{grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr))}
#reken .kaart{background:var(--vlak);border:1px solid var(--lijn);border-radius:12px;padding:20px}
#reken .kaart h3{color:var(--tekst)}
#reken .kaart.voertuig{padding:0;overflow:hidden;display:flex;flex-direction:column}
#reken .kaart.voertuig .beeld{background:var(--vlak2);border-bottom:1px solid var(--lijn);
aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;overflow:hidden}
#reken .kaart.voertuig .beeld img, #reken .kaart.voertuig .beeld picture{width:100%;height:100%;object-fit:cover;display:block}
#reken .kaart.voertuig .beeld img.silhouet{width:82%;height:auto;object-fit:contain}
#reken .kaart.voertuig h3{padding:16px 18px 0}
#reken .kaart.voertuig p, #reken .kaart.voertuig .vanaf, #reken .kaart.voertuig .prijs{padding:0 18px}
#reken .kaart.voertuig .vanaf, #reken .kaart.voertuig .prijs{display:block}
#reken .kaart.voertuig p:last-child{padding-bottom:18px}
#reken .kaart p{color:var(--dof);font-size:.94rem;margin:0}
#reken .prijs{font-family:var(--m);font-size:1.7rem;font-weight:600;color:var(--goud);
font-variant-numeric:tabular-nums;display:block;margin:.15em 0}
#reken .vanaf{font-size:.72rem;color:var(--dof2);text-transform:uppercase;letter-spacing:.1em;font-family:var(--m)}
#reken ul.vink{list-style:none;padding:0;margin:1.2em 0 0;display:grid;gap:.7em}
#reken ul.vink li{position:relative;padding-left:2.6rem;color:var(--dof);font-size:.96rem;min-height:1.6em}
#reken ul.vink li strong{color:var(--tekst)}
#reken ul.vink li::before{content:"";position:absolute;left:.62rem;top:.62em;width:.5rem;height:.5rem;
background:var(--goud);transform:rotate(45deg)}
#reken ul.vink li.meticoon::before{display:none}
#reken ul.vink li .ic{position:absolute;left:0;top:.05em;color:var(--goud);display:block;
filter:drop-shadow(0 0 5px rgba(201,162,74,.35))}
#reken ul.vink li .ic svg{width:22px;height:22px;display:block}
#reken .onthul .ic svg path, #reken .onthul .ic svg circle, #reken .onthul .ic svg rect{stroke-dasharray:120;stroke-dashoffset:120}
#reken .onthul.in .ic svg path, #reken .onthul.in .ic svg circle, #reken .onthul.in .ic svg rect{animation:tekenen 1.1s ease forwards .2s}
#reken{background:var(--vlak);border:1px solid var(--goud2);border-radius:14px;padding:22px;margin-top:28px}
#reken .labelrij{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
#reken .hierknop{background:none;border:none;color:var(--goud);font:inherit;font-size:.78rem;
cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:.2em}
#reken .hierknop:hover{color:var(--tekst)}
#reken .hierknop[disabled]{opacity:.6;cursor:progress;text-decoration:none}
/* CONTRAST-LABEL-20260826 — --dof2 op --vlak gaf 3.47:1, WCAG AA eist 4,5:1 voor tekst.
   --dof (elders al gebruikt op deze site) haalt 5,49:1 — geen nieuwe kleur nodig.
   (Hermeten 10-09 na het optrekken van --dof naar #908D85; stond hier op 5.14:1.) */
#reken label{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;
color:var(--dof);margin-bottom:.35em;font-family:var(--m)}
#reken input, #reken select, #reken textarea{width:100%;background:var(--bg);border:1px solid var(--lijn);
color:var(--tekst);padding:.75em .85em;border-radius:9px;font:inherit;font-size:1rem}
#reken input:focus, #reken select:focus, #reken textarea:focus{outline:2px solid var(--goud);outline-offset:2px;border-color:var(--goud)}
#reken input[type="radio"]{width:auto;flex:none;padding:0;margin:0;accent-color:var(--goud)}
#reken .velden{display:grid;gap:16px 30px;grid-template-columns:1fr 1fr}
/* FORM-PRO-20260922 — keuzes als kaarten, niet als kale radio's op één regel. */
#reken .boek-stap{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--goud);font-family:var(--m);margin:1.35rem 0 .7rem;font-weight:700}
#reken .boek-stap:first-child{margin-top:0}
#reken label:has(> input[type="radio"]){text-transform:none;letter-spacing:normal;font-family:inherit;font-size:.95rem;white-space:normal!important;min-width:0;max-width:100%;margin:0}
#reken .keuze-rij{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:6px;min-width:0;max-width:100%}
#reken .keuze-rij > label{display:flex;align-items:center;gap:10px;font-weight:500;width:100%;min-width:0;max-width:100%;white-space:normal!important;
  padding:.85em 1em;border:1px solid var(--lijn);border-radius:10px;background:var(--bg);cursor:pointer;color:var(--tekst)}
#reken .keuze-rij > label:hover{border-color:var(--goud2)}
#reken .keuze-rij > label:has(input:checked){border-color:var(--goud);background:rgba(217,181,101,.12);box-shadow:inset 3px 0 0 var(--goud)}
#reken .keuze-rij input[type="radio"]{width:auto;flex:none;padding:0;margin:0}
@media(min-width:700px){
#reken .keuze-rij{flex-direction:row;flex-wrap:wrap;gap:10px}
#reken .keuze-rij > label{width:auto;flex:1 1 12rem}
}
@media(max-width:640px){
#reken .velden{grid-template-columns:1fr}
#reken{margin-left:12px;margin-right:12px;padding:18px 14px;overflow-x:clip;max-width:100%;box-sizing:border-box}
#reken .knop{width:100%}
}
#reken .knop{background:var(--goud);color:var(--op-goud,#0B0B0D);border:none;padding:.85em 1.7em;border-radius:9px;
font:inherit;font-weight:700;cursor:pointer;font-size:1rem}
#reken .knop:hover{background:#dbb45f}
#reken .knop[disabled]{opacity:.55;cursor:progress}
#reken .knop.stil{background:transparent;color:var(--goud);border:1px solid var(--goud2)}
#reken .uitslag{margin-top:20px;display:none}
#reken .uitslag.aan{display:block}
#reken .route-kop{font-size:.9rem;color:var(--dof);margin-bottom:14px}
#reken .opties{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
/* VOERTUIGKAART-20260826 — .optie had nooit eigen opmaak, alleen de grid-container
   (.opties) hierboven. Zonder deze regels rendert elke voertuigkeuze als een kale,
   ongestylede knop — met dezelfde iconen als op de contactpagina (zie index.php) ziet
   dit er nu ook zo uit. */
#reken .optie{position:relative;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  background:var(--vlak2);border:1.5px solid var(--lijn);border-radius:10px;
  padding:.9rem .8rem;cursor:pointer;font:inherit;color:var(--tekst);text-align:center;
  transition:border-color .15s,background .15s}
#reken .optie:hover{border-color:var(--goud2)}
#reken .optie img{width:64px;height:auto;margin-bottom:.15em}
#reken .optie .nm{font-weight:700;font-size:.95rem}
#reken .optie .prijs{font-family:var(--m);color:var(--goud);font-weight:700;font-size:1.15rem;margin:.1em 0}
#reken .optie .cap{font-size:.76rem;color:var(--dof2)}
#reken .optie .waarom{font-size:.74rem;color:#E8636E}
#reken .optie[aria-pressed="true"]{border-color:var(--goud);background:rgba(217,181,101,.08)}
#reken .optie.past-niet{opacity:.45;cursor:not-allowed}
#reken .gezelschap{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin:0 0 16px}
#reken .gezelschap .stap{display:flex;align-items:center;gap:8px}
#reken .gezelschap .lbl{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--dof2);font-family:var(--m);min-width:5.4rem}
#reken .tel-knop{width:34px;height:34px;border-radius:9px;background:var(--bg);
  border:1px solid var(--lijn);color:var(--tekst);font-size:1.1rem;line-height:1;
  cursor:pointer;font-family:var(--f)}
#reken .tel-knop:hover:not(:disabled){border-color:var(--goud);color:var(--goud)}
#reken .tel-knop:disabled{opacity:.3;cursor:default}
#reken .gezelschap output{min-width:2ch;text-align:center;font-weight:700;font-family:var(--m)}
#reken .gez-hint{flex-basis:100%;margin:2px 0 0;font-size:.82rem;color:var(--goud)}
#reken .gez-hint:empty{display:none}
#reken .honing{position:absolute;left:-9999px}
/* BOEKFORM-KAART-20260923 — gegevens, rit en betalen als één blok, niet als
   losse velden onder de voertuigkeuze. */
#reken .boekform{
  margin-top:1.35rem;padding:1.15rem 1.1rem 1.25rem;border:1px solid var(--lijn,#3A3A46);
  border-radius:12px;background:var(--vlak2)
}
html.taxi-dag #reken div.fout{
  background:rgba(155,30,41,.08);border-color:#C45A62;color:#7A121C
}
html.taxi-dag #reken div.fout a{color:#7A121C}
html.taxi-dag #reken div.goed{color:#1A1814}
html.taxi-dag #reken div.goed strong{color:#1F6B45}
html.taxi-dag #reken .maatwerk a:hover{color:var(--goud);border-bottom-color:var(--goud)}
#reken .bel.groot, #reken .knop.stil.groot{font-size:1.02rem;padding:.85em 1.6em;display:inline-block;
text-decoration:none;border-radius:9px}
#reken .knop.stil.groot{background:transparent;color:var(--goud);border:1px solid var(--goud2)}
#reken .knop.stil.groot:hover{background:var(--vlak2);color:var(--tekst)}
#reken .knop.wa{background:#1f7a4d;color:#fff;border:none;display:inline-flex;align-items:center;gap:.55em}
#reken .knop.wa:hover{background:#249159;color:#fff}
#reken .prijs{animation:goudgloed 5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
#reken .kaart, #reken .kaart.voertuig .beeld img, #reken .kaart.voertuig .beeld picture{transition:none}
#reken a.kaart:hover, #reken .kaart.voertuig:hover{transform:none}
}
#reken .kaart{transition:transform .4s cubic-bezier(.2,.8,.3,1),border-color .3s ease}
#reken a.kaart:hover, #reken .kaart.voertuig:hover{transform:translateY(-4px);border-color:var(--goud2)}
#reken .kaart.voertuig .beeld img, #reken .kaart.voertuig .beeld picture{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
#reken .kaart.voertuig:hover .beeld img, #reken .kaart.voertuig:hover .beeld picture{transform:scale(1.05)}
#reken .bel, #reken .knop{transition:transform .18s ease,background .2s ease,box-shadow .25s ease}
#reken .bel:active, #reken .knop:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){
#reken .logo svg, #reken .prijs, #reken .banner img, #reken .logo::after{animation:none}
#reken .onthul .ic svg path, #reken .onthul .ic svg circle, #reken .onthul .ic svg rect{stroke-dashoffset:0}
}

/* VINK-BUITEN-REKEN-20260825 — de lijst "Waarom mensen ons bellen" stond zonder opmaak.
   Elke regel voor .vink/.meticoon/.ic hierboven is gescoped op #reken, maar de enige
   ul.vink op de homepage staat DAARBUITEN (twee </section> verder). Gevolg: geen
   list-style:none dus bolletjes, geen padding-left dus icoon over de tekst heen, en
   .ic svg zonder afmeting — dat leest als lege, kapotte icoontjes.
   Zelfde waarden als de #reken-versie, alleen zonder scope. Binnen #reken wint de
   specifiekere regel hierboven, dus daar verandert niets. */
ul.vink{list-style:none;padding:0;margin:1.2em 0 0;display:grid;gap:.7em}
ul.vink li{position:relative;padding-left:2.6rem;color:var(--dof);font-size:.96rem;min-height:1.6em}
ul.vink li strong{color:var(--tekst)}
ul.vink li.meticoon::before{display:none}
ul.vink li .ic{position:absolute;left:0;top:.05em;color:var(--goud);display:block}
ul.vink li .ic svg{width:22px;height:22px;display:block}

/* VELDENRIJ-PC-20260825 — Op PC viel de knop "Toon prijs" op een derde regel: 127px breed
   onder twee velden van elk 595px, met een leeg vlak van ruim 1000px ernaast. Gemeten op
   1280px: #van links=23, #naar links=648, #bReken links=23 top=1085.
   Nu een zoekbalk-rij: ophaaladres | bestemming | knop, alles op een regel en onderling
   op de onderkant uitgelijnd. display:contents tilt de twee veldblokken uit .velden zodat
   ze rechtstreeks in het formulier-raster vallen; zonder die regel kan de knop nooit
   naast de velden staan. Onder 900px blijft alles zoals het was. */
@media(min-width:900px){
  #reken #fReken{display:grid;grid-template-columns:1fr 1fr auto;gap:16px 30px;align-items:end}
  #reken #fReken>.velden{display:contents}
  #reken #fReken>div:not(.velden){margin-top:0!important}
  #reken #fReken .knop{height:52px;padding:0 2.2em;white-space:nowrap}
}

/* WERKGEBIED-20260826 — "buiten ons werkgebied" is geen fout maar een uitnodiging.
   Daarom niet de rode foutbalk, maar een rustige kaart in de merkkleur.
   OP-AANVRAAG-ZICHTBAAR-20260916 — `.opaanvraag` deelt die vorm bewust: "voor de sedan geven wij
   de prijs op aanvraag" is precies zo'n uitnodiging en geen storing. */
#reken .maatwerk, #reken .opaanvraag{background:var(--vlak2,#1D1D24);border:1px solid var(--goud2,#8C6F3A);
  border-left:3px solid var(--goud,#D9B565);border-radius:10px;
  padding:1rem 1.15rem;margin-top:1rem;color:var(--tekst,#F7F6F2);
  font-size:.95rem;line-height:1.5}
#reken .maatwerk a{color:var(--goud,#D9B565);font-weight:700;text-decoration:none;
  border-bottom:1px solid var(--goud2,#8C6F3A);white-space:nowrap}
#reken .maatwerk a:hover{color:#fff;border-bottom-color:#fff}
#reken .opaanvraag[hidden]{display:none}

/* FOUTMELDING-EN-BEVESTIGING-ZICHTBAAR-20260916
 *
 * 🔴 Gemeten 16-09: in dit hele bestand stond geen enkele regel voor `.fout` of `.goed`, en in
 *    styles.css alleen `.dt-uitleg.fout`. De rekenmodule zet zijn meldingen letterlijk neer als
 *    <div class="fout">…</div> en <div class="goed">…</div> — dus ELKE foutmelding ("dit adres
 *    kan ik niet vinden", "die datum is al geweest") en ook de BEVESTIGING na een geslaagde
 *    aanvraag verscheen als kale, ongemarkeerde tekst onder het formulier, in dezelfde kleur en
 *    grootte als de rest. Op een telefoon las dat als "er is niets gebeurd".
 *
 * Bewust dezelfde vorm als .maatwerk hierboven (kaart met gekleurde linkerrand), zodat de drie
 * soorten meldingen als één familie lezen: rood = er klopt iets niet, groen = het is gelukt,
 * goud = bel ons even.
 * 🔬 Contrast nagerekend op de donkere kaart (--vlak #15151A): foutkleur #FFD9D5 haalt 12,4:1,
 *    de bevestigingstekst --tekst ruim 14:1 en het kenmerk #7FD8A6 9,7:1. WCAG AA eist 4,5:1.
 */
/* 🪤 `div.fout` en niet `.fout`. datumtijd.js zet zijn uitleg onder het datumveld — dat staat
      BINNEN #reken — en geeft die bij een onmogelijke keuze óók de klasse `fout`. Een kale
      `#reken .fout` zou van dat regeltje ("Die dag is al geweest") een volle rode kaart midden
      in het formulier maken. Die regel heeft al zijn eigen opmaak in styles.css (.dt-uitleg.fout)
      en hoort een regel te blijven; de module zet zijn meldingen altijd in een <div>. */
#reken div.fout{background:rgba(232,99,110,.10);border:1px solid #8C3A42;
  border-left:3px solid #E8636E;border-radius:10px;
  padding:1rem 1.15rem;margin-top:1rem;color:#FFD9D5;font-size:.95rem;line-height:1.5}
#reken div.fout a{color:#FFD9D5;font-weight:700}
#reken div.goed{background:rgba(53,169,109,.10);border:1px solid #2F7F55;
  border-left:3px solid #35A96D;border-radius:10px;
  padding:1rem 1.15rem;margin-top:1rem;color:var(--tekst,#F3F1EC);font-size:.95rem;line-height:1.5}
#reken div.goed strong{display:inline-block;margin-bottom:.35em;color:#7FD8A6;
  font-family:var(--m);font-size:1rem;letter-spacing:.02em}

/* RETOUR-IN-HET-FORMULIER-20260916 — de regel onder de keuze enkele reis / retour. */
#reken .retour-uitleg{margin:.5rem 0 0;font-size:.86rem;color:var(--goud,#D9B565);min-height:1.1em}
#reken .retour-uitleg:empty{display:none}