/* Mijn account bij BEXX Verhuur.
   Aanmelden, wachtwoord vergeten en het accountscherm.

   Waarom hier alles in staat en niet in de pagina zelf: de rest van de site zet
   zijn opmaak in een <style> in de pagina, maar dit zijn DRIE pagina's die er
   precies hetzelfde moeten uitzien. Stond het drie keer, dan liep het na de
   eerste aanpassing uit elkaar. De kleuren, de letters en de navigatie zijn
   letterlijk die van de rest van de site, zodat een klant niet voelt dat hij
   ergens anders terechtkomt. */

:root{
  --or:#FF7D38; --or-d:#E86420; --or-l:#FF9A63;
  --ink:#14161A; --ink-2:#1C2026; --ink-3:#272C34; --line:#333942;
  --wit:#FFFFFF; --paper:#F5F3F0; --paper-2:#E7E3DD; --grijs:#8B9199; --grijs-d:#5A616B;
  --groen:#1F7A4D; --rood:#B3261E;
  --r:14px; --sp:clamp(48px,7vw,88px); --pad:clamp(20px,5vw,64px);
  --h1:clamp(2.1rem,5vw,3.6rem); --h2:clamp(1.6rem,3vw,2.4rem); --h3:clamp(1.15rem,1.7vw,1.5rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--ink);color:var(--wit);font:400 17px/1.65 Inter,system-ui,sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:Archivo,system-ui,sans-serif;font-weight:800;line-height:1.02;letter-spacing:-.03em}
h1{font-size:var(--h1)}h2{font-size:var(--h2)}h3{font-size:var(--h3);line-height:1.14;letter-spacing:-.02em}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--pad)}
.sec{padding:var(--sp) 0}
.eyebrow{font:600 12px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--or);margin-bottom:18px;display:block}
.lead{font-size:clamp(1.02rem,1.5vw,1.2rem);color:#C6CBD2;max-width:62ch}
.paper{background:var(--paper);color:var(--ink)}
.paper .lead{color:#4A5058}.paper .eyebrow{color:var(--or-d)}
.num{font-variant-numeric:tabular-nums}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:15px 26px;border-radius:100px;
  font:600 15px/1 Inter,sans-serif;text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn-or{background:var(--or);color:#241000;border-color:var(--or)}
.btn-or:hover{background:var(--or-d);border-color:var(--or-d);color:#fff}
.btn-gh{border-color:rgba(255,255,255,.32);color:#fff;background:none}
.btn-gh:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.paper .btn-gh{border-color:rgba(20,22,26,.28);color:var(--ink)}
.paper .btn-gh:hover{border-color:var(--ink);background:rgba(20,22,26,.05)}

/* ---------- navigatie, gelijk aan de rest van de site ---------- */
.nav{position:sticky;top:0;z-index:90;background:rgba(20,22,26,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1320px;margin:0 auto;padding:0 var(--pad);height:84px;display:flex;align-items:center;gap:20px}
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo img{height:54px;width:auto}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav-links a{text-decoration:none;font:500 15px/1 Inter,sans-serif;color:#C6CBD2;padding:11px 14px;border-radius:8px;transition:color .18s,background .18s}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav-links a.act{color:var(--or)}
.nav-tel{display:inline-flex;align-items:center;gap:8px;background:var(--or);color:#241000!important;padding:12px 20px!important;border-radius:100px;font-weight:600!important}
.nav-tel:hover{background:var(--or-d);color:#fff!important}
/* Direct huren staat sinds 27-09-2026 ook hier in de menubalk, zoals op elke
   andere pagina (daar komt de stijl uit winkel.css, dat deze pagina's niet laden).
   De telefoon ernaast wordt dan omlijnd: twee oranje pillen naast elkaar lezen
   als één knop die dubbel staat. */
.nav-links .wk-navknop{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:40px;padding:0 17px;border-radius:999px;background:var(--or);color:#241000;
  font-weight:700;font-size:14.5px;white-space:nowrap}
.nav-links .wk-navknop:hover{background:var(--or-d);color:#fff}
.nav-links .wk-navknop + .nav-tel{background:transparent;color:#fff!important;border:1px solid rgba(255,255,255,.3)}
.nav-links .wk-navknop + .nav-tel:hover{background:rgba(255,255,255,.08);border-color:#fff}
@media(max-width:1240px){ .nav-links .wk-navknop{min-height:50px;margin-top:8px} }
.burger{display:none;margin-left:auto;background:none;border:1.5px solid var(--line);color:#fff;width:46px;height:46px;border-radius:10px;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:19px;height:2px;background:#fff;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:#fff}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ---------- de aanmeldkaart ---------- */
.aanmeld{min-height:calc(100vh - 84px);display:grid;grid-template-columns:1.05fr .95fr;background:var(--ink-2)}
.aanmeld-txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(44px,6vw,84px) clamp(24px,5vw,64px);
  /* links op dezelfde lijn als het logo en elke sectie (de kolom van 1320 px), 27-09-2026 */
  padding-left:max(clamp(24px,5vw,64px), calc((100vw - 1320px) / 2 + var(--pad)))}
.aanmeld-txt h1 em{font-style:normal;color:var(--or)}
.aanmeld-vak{display:flex;align-items:center;justify-content:center;padding:clamp(28px,4vw,64px) clamp(20px,5vw,64px);background:var(--paper)}
.kaart{background:var(--wit);border:1px solid var(--paper-2);border-radius:var(--r);padding:clamp(24px,3.4vw,40px);width:100%;max-width:520px;
  color:var(--ink);box-shadow:0 26px 60px -34px rgba(20,22,26,.3)}
.kaart h2{font-size:clamp(1.5rem,2.4vw,2rem)}
.kaart .btn{width:100%}

.fld{margin-bottom:20px}
.fld label{display:block;font:600 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--grijs-d);margin-bottom:9px}
.fld input{width:100%;min-height:56px;border:1.5px solid var(--paper-2);border-radius:11px;background:var(--paper);color:var(--ink);
  font:400 16px/1.5 Inter,sans-serif;padding:16px;transition:border-color .18s,background .18s,box-shadow .18s}
.fld input:hover{border-color:#CFC9C1}
.fld input:focus{outline:2px solid var(--or);outline-offset:1px;border-color:var(--or);background:var(--wit);box-shadow:0 0 0 4px rgba(255,125,56,.14)}
.fld .hint{font-size:13.5px;color:var(--grijs-d);margin-top:8px;line-height:1.6}

/* De uitleg boven het wachtwoordveld. Vandaag heeft nog NIEMAND een wachtwoord,
   dus dit is geen kleine letter onderaan: het is de weg die iedereen moet nemen.
   Daarom staat het in het oranje kader, boven het veld, met de knop erin. */
.uitleg{border:1.5px solid var(--or);background:rgba(255,125,56,.09);border-radius:12px;padding:18px 20px;margin-bottom:22px}
.uitleg[hidden]{display:none}
.uitleg b{display:block;font:800 1.05rem/1.25 Archivo,sans-serif;color:var(--ink);letter-spacing:-.02em;margin-bottom:7px}
.uitleg p{font-size:14.5px;color:#4A5058;line-height:1.6}
.uitleg .btn{margin-top:14px;min-height:50px;font-size:15px}

.melding{display:none;border-radius:11px;padding:15px 17px;margin-bottom:20px;font-size:14.5px;line-height:1.6}
.melding.aan{display:block}
.melding b{display:block;font-weight:600;margin-bottom:4px}
.melding-fout{background:#FCEEEC;border:1px solid #E8B4AF;color:#7A1C16}
.melding-goed{background:#EAF5EF;border:1px solid #A8D3BC;color:#155537}
.melding .btn{width:auto;margin-top:12px;min-height:44px;padding:11px 18px;font-size:14px}
.melding a.lk{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* Een knop binnen een melding staat op een LICHTE achtergrond. Zonder deze regel
   erft .btn-gh zijn witte letters van de donkere site en stond "Bekijk een wagen"
   wit op lichtroze: onzichtbaar. Gezien op de eerste schermafdruk. */
.melding .btn-gh{border-color:rgba(20,22,26,.3);color:var(--ink);background:rgba(255,255,255,.6)}
.melding .btn-gh:hover{border-color:var(--ink);background:#fff}

/* het aangemaakte wachtwoord, groot en te kopiëren */
.geheim{background:var(--ink);color:#fff;border-radius:12px;padding:20px 22px;margin:6px 0 20px;text-align:center}
.geheim span{display:block;font:600 11.5px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--grijs);margin-bottom:10px}
.geheim code{font:700 clamp(1.35rem,4vw,1.9rem)/1.2 "Courier New",ui-monospace,monospace;letter-spacing:.08em;color:var(--or);word-break:break-all}

.stap-lijn{display:flex;gap:8px;margin-bottom:24px}
.stap-lijn i{flex:1;height:4px;border-radius:2px;background:var(--paper-2);font-style:normal}
.stap-lijn i.aan{background:var(--or)}

/* ---------- het accountscherm ---------- */
.acc-kop{background:var(--ink-2);padding:clamp(34px,4.5vw,60px) 0 clamp(30px,4vw,52px);border-bottom:1px solid var(--line)}
.acc-kop-in{display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px}
.acc-kop h1{flex:1 1 320px}
.acc-kop .lead{margin-top:12px}
.acc-uit{min-height:48px;padding:13px 22px;font-size:14.5px}

.gegevens{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:28px}
.gegevens div{background:var(--ink-2);padding:16px 18px;min-height:80px}
.gegevens span{display:block;font:600 11.5px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--grijs);margin-bottom:7px}
.gegevens b{font:600 15.5px/1.4 Inter,sans-serif;color:#fff;word-break:break-word}

.blok{margin-top:clamp(36px,5vw,60px)}
.blok-kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:20px}
.blok-kop h2{flex:1 1 auto}
.blok-kop .telling{font-size:14.5px;color:var(--grijs-d)}

/* Eén wit vlak met haarlijnen ertussen, en niet vierenzestig aparte kaartjes.
   Louis' woord voor het oude scherm was "chaos": elke regel had een eigen rand,
   die randen zaten in een lijst met een rand, en die lijst in een blok met een
   rand. Nu draagt alleen het vlak zelf een rand, en scheiden haarlijnen de
   regels. Dat geeft rust en het scheelt ook een pak grijs. */
.lijst{display:grid;gap:0;background:var(--wit);border:1px solid var(--paper-2);border-radius:var(--r);overflow:hidden}
.lijst>*+*{border-top:1px solid var(--paper-2)}
.regel{background:var(--wit);padding:20px;display:grid;grid-template-columns:1fr auto;gap:6px 18px;align-items:center}
.regel-hoofd{font:700 1.08rem/1.25 Archivo,sans-serif;letter-spacing:-.02em;color:var(--ink)}
.regel-sub{font-size:14px;color:var(--grijs-d);line-height:1.55}
.regel-rechts{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.bedrag{font:700 1.15rem/1 Archivo,sans-serif;letter-spacing:-.02em;color:var(--ink)}
.regel a.open{display:inline-flex;align-items:center;min-height:44px;padding:11px 16px;border:1.5px solid rgba(20,22,26,.2);border-radius:100px;
  font:600 14px/1 Inter,sans-serif;text-decoration:none;color:var(--ink);white-space:nowrap}
.regel a.open:hover{border-color:var(--ink);background:rgba(20,22,26,.05)}

.merk{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:100px;font:600 12.5px/1 Inter,sans-serif;white-space:nowrap}
.merk::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.merk-komt{background:rgba(255,125,56,.14);color:var(--or-d)}
.merk-loopt{background:rgba(31,122,77,.13);color:var(--groen)}
.merk-af{background:rgba(20,22,26,.07);color:var(--grijs-d)}
.merk-betaald{background:rgba(31,122,77,.13);color:var(--groen)}
.merk-open{background:rgba(255,125,56,.14);color:var(--or-d)}
.merk-vervallen{background:rgba(179,38,30,.11);color:var(--rood)}

.openstaand{display:flex;flex-wrap:wrap;align-items:center;gap:14px;background:var(--ink);color:#fff;border-radius:var(--r);
  padding:20px 24px;margin-bottom:20px}
.openstaand b{font:800 clamp(1.4rem,3vw,1.9rem)/1 Archivo,sans-serif;letter-spacing:-.03em;color:var(--or)}
.openstaand span{font-size:14.5px;color:#C6CBD2}
.openstaand.nul b{color:#8FD3AF}

/* ---------- de trouwkaart ---------- */
.trouw{background:var(--ink);color:#fff;border-radius:var(--r);padding:clamp(24px,3.4vw,40px);overflow:hidden;position:relative}
.trouw h2{color:#fff}
.trouw .uit{font-size:15px;color:#C6CBD2;margin-top:10px;max-width:56ch}
.stempels{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 22px}
.stempel{width:52px;height:52px;border-radius:50%;border:2px dashed var(--line);display:grid;place-items:center;
  font:700 15px/1 Archivo,sans-serif;color:var(--grijs)}
.stempel.vol{border:2px solid var(--or);background:var(--or);color:#241000}
.trouw-stand{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px}
.trouw-stand b{font:800 clamp(1.5rem,3.4vw,2.2rem)/1 Archivo,sans-serif;letter-spacing:-.03em;color:var(--or)}
.trouw-stand span{font-size:15px;color:#C6CBD2}
/* De voorwaarden van de korting, op de kaart zelf. Wie ze pas aan de balie te
   horen krijgt, voelt zich beetgenomen, ook al klopt de regel.
   De letters staan op #C6CBD2 en niet op --grijs-d: dat laatste haalt op de
   donkere kaart maar 3,9:1 en is voor tekst van 14 px te flauw. */
ul.trouw-regels{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:22px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;
  padding:15px 17px;font-size:14.5px;line-height:1.55;color:#C6CBD2;max-width:62ch}
ul.trouw-regels li{padding-left:17px;position:relative}
ul.trouw-regels li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--or)}
ul.trouw-regels li b{color:#fff;font-weight:700}
.trouw-tel{margin-top:14px;font-size:14px;line-height:1.55;color:#C6CBD2;max-width:62ch}
.trouw-bron{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--grijs)}
.balk{height:8px;border-radius:4px;background:var(--ink-3);overflow:hidden;margin:18px 0 14px;max-width:520px}
.balk i{display:block;height:100%;background:var(--or);border-radius:4px;font-style:normal}
.bereikt{display:inline-flex;align-items:center;gap:9px;background:rgba(255,125,56,.14);border:1px solid rgba(255,125,56,.5);
  color:var(--or);border-radius:100px;padding:9px 16px;font:600 14px/1 Inter,sans-serif;margin-top:4px}

/* wijzigen van telefoon en adres */
.wijzig{display:none;margin-top:22px;background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.6vw,28px)}
.wijzig.aan{display:block}
.wijzig .fld label{color:var(--grijs)}
.wijzig .fld input{background:var(--ink-2);border-color:var(--line);color:#fff}
.wijzig .fld input:focus{background:var(--ink);border-color:var(--or)}
.wijzig-knoppen{display:flex;flex-wrap:wrap;gap:10px}
.wijzig-knoppen .btn{min-height:48px}

.leeg{background:var(--wit);border:1px dashed var(--paper-2);border-radius:var(--r);padding:28px 24px;text-align:center;color:var(--grijs-d);font-size:15px}

/* Het lint dat eerlijk zegt dat dit een demo is en waar de gegevens staan.
   Zonder dat lint lijkt het alsof BEXX echte klantgegevens op het internet zet. */
.lint{background:var(--ink-3);border-bottom:1px solid var(--line);padding:11px var(--pad);text-align:center;font-size:13.5px;color:#C6CBD2}
.lint b{color:var(--or);font-weight:600}
.paper .lint,.kaart .lint{background:var(--paper);color:#4A5058;border:1px solid var(--paper-2);border-bottom:1px solid var(--paper-2);border-radius:10px;padding:13px 16px}
.kaart .lint b{color:var(--or-d)}

/* ---------- voettekst ---------- */
.ft{background:var(--ink);border-top:1px solid var(--line);padding:clamp(46px,6vw,74px) 0 30px}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(24px,4vw,48px)}
.ft img{height:68px;width:auto;margin-bottom:18px}
.ft p,.ft a{font-size:14.5px;color:var(--grijs);text-decoration:none;line-height:1.85}
.ft a:hover{color:var(--or)}
.ft h4{font:600 12px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:15px}
.ft-links{display:flex;flex-direction:column}
.ft-bot{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:13px;color:var(--grijs-d)}

@media(max-width:1080px){.ft-grid{grid-template-columns:1fr 1fr}}
/* 1240 en niet 1080: het menu telt acht items sinds "Mijn account" erbij kwam,
   en gemeten op de echte server wikkelde de balk tussen 1081 en 1240 px over
   twee regels. Onder dit punt zit alles in de burgerknop. Hetzelfde getal
   staat in de kop van elke andere pagina van de site. */
@media(min-width:861px) and (max-width:1240px){
  .nav-links{display:none;position:fixed;inset:84px 0 auto;background:var(--ink);flex-direction:column;align-items:stretch;
    padding:14px var(--pad) 26px;border-bottom:1px solid var(--line);gap:2px;max-height:calc(100vh - 84px);overflow-y:auto}
  .nav-links.open{display:flex}
  .nav-links a{padding:15px 4px;font-size:16.5px;min-height:52px;display:flex;align-items:center}
  .nav-tel{justify-content:center;margin-top:10px;display:flex}
  .burger{display:flex}
  .logo{flex:0 0 auto}
  .logo img{width:114px;height:auto}
}
@media(max-width:860px){
  .nav-in{height:72px}
  .logo{min-height:44px}
  .logo img{height:44px}
  .nav-links{display:none;position:fixed;inset:72px 0 auto;background:var(--ink);flex-direction:column;align-items:stretch;
    padding:14px var(--pad) 26px;border-bottom:1px solid var(--line);gap:2px;max-height:calc(100vh - 72px);overflow-y:auto}
  .nav-links.open{display:flex}
  .nav-links a{padding:15px 4px;font-size:16.5px;min-height:52px;display:flex;align-items:center}
  .nav-tel{justify-content:center;margin-top:10px}
  .burger{display:flex}
  .aanmeld{grid-template-columns:1fr;min-height:0}
  .aanmeld-txt{padding:38px var(--pad) 34px}
  .aanmeld-vak{padding:28px var(--pad) 48px}
  .kaart{max-width:none}
  /* Op een telefoon staat het bedrag onder de regel, niet ernaast: naast elkaar
     werd de wagennaam in twee letters per regel geperst. */
  .regel{grid-template-columns:1fr}
  .regel-rechts{align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap;gap:10px 14px;margin-top:6px}
  /* min-height en niet height: het adres staat op twee regels en die mogen
     blijven staan. Het regeleinde wegnemen maakte er "Aarschotsebaan 1a3370
     Boutersem" van. */
  .ft-links a{min-height:44px;display:flex;flex-direction:column;justify-content:center;line-height:1.4;padding:6px 0}
}
@media(max-width:520px){
  .ft-grid{grid-template-columns:1fr}
  .stempel{width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}

/* ---------- uitklapbare regels (contracten en facturen) ----------
   Met <details> en <summary> in plaats van een eigen klikbaar blok: dan werkt
   het openen ook met het toetsenbord en met een schermlezer, zonder één regel
   JavaScript. */
.uitklap{background:var(--wit)}
.uitklap>summary{list-style:none;cursor:pointer;padding:18px 20px;display:grid;grid-template-columns:1fr auto;gap:6px 18px;align-items:center;min-height:72px}
.uitklap>summary::-webkit-details-marker{display:none}
.uitklap>summary:hover{background:#FBFAF8}
.uitklap>summary:focus-visible{outline:2px solid var(--or);outline-offset:-3px}
.uitklap .pijl{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  font:600 14px/1 Inter,sans-serif;color:var(--grijs-d)}
/* Het woord staat in de opmaak en niet in de pagina, zodat het van "Openen"
   naar "Sluiten" kan wisselen zonder één regel JavaScript. De <summary> zelf
   vertelt een schermlezer al of hij open of dicht staat, dus dit woord is
   versiering en staat op aria-hidden. */
.uitklap .pijl::before{content:"Openen"}
.uitklap[open] .pijl::before{content:"Sluiten"}
.uitklap .pijl::after{content:"";display:block;width:9px;height:9px;margin-left:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.uitklap[open]>summary{background:#FBFAF8;border-bottom:1px solid var(--paper-2)}
.uitklap[open] .pijl::after{transform:rotate(-135deg) translateY(-2px)}
.uitklap-in{padding:20px;background:#FBFAF8}
.paren{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px 24px}
.paren div span{display:block;font:600 11.5px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--grijs-d);margin-bottom:6px}
.paren div b{font:600 15.5px/1.4 Inter,sans-serif;color:var(--ink)}
.uitklap-in .voet{margin-top:18px;padding-top:16px;border-top:1px solid var(--paper-2);font-size:13.5px;color:var(--grijs-d);line-height:1.65}
.uitklap-in .voet a{color:var(--or-d);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;min-height:44px}
@media(max-width:860px){
  .uitklap>summary{grid-template-columns:1fr}
  .uitklap>summary .regel-rechts{align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap;gap:10px 14px;margin-top:6px}
}

/* Een telefoonnummer midden in een zin. Het moet met een duim te raken zijn
   (44 px), maar het mag de regelafstand van die zin niet uit elkaar duwen.
   Vandaar de opvulling MET een even grote negatieve marge: het raakvlak groeit,
   de tekst blijft staan waar ze staat. */
.tel-in{display:inline-block;padding:12px 4px;margin:-12px -4px;color:var(--or);font-weight:600;
  text-decoration:underline;text-underline-offset:3px}
.kaart .tel-in{color:var(--or-d)}
.tel-in:hover{color:var(--or-l)}
.kaart .tel-in:hover{color:var(--ink)}


/* ============================================================================
   DE TABBLADEN VAN HET ACCOUNTSCHERM
   Vier onderdelen naast elkaar in plaats van vier blokken onder elkaar. De
   balk hoort visueel bij het lichte vel eronder, want zij verdeelt dat vel.
   ========================================================================= */
.tabbuiten{position:relative;border-bottom:1px solid var(--paper-2);margin-bottom:clamp(28px,4vw,44px)}
.tabbalk{display:flex;gap:4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabbalk::-webkit-scrollbar{display:none}

.tab{flex:0 0 auto;display:flex;flex-direction:column;gap:5px;align-items:flex-start;justify-content:center;
  min-height:72px;padding:14px 20px 15px;border:0;border-bottom:3px solid transparent;background:none;cursor:pointer;
  text-align:left;color:var(--grijs-d);font-family:inherit;transition:color .16s,border-color .16s,background .16s}
.tab:hover{color:var(--ink);background:rgba(20,22,26,.035)}
.tab:focus-visible{outline:2px solid var(--or-d);outline-offset:-3px}
.tab .tab-naam{font:700 1.02rem/1.15 Archivo,system-ui,sans-serif;letter-spacing:-.005em;color:inherit}
.tab .tab-bij{font:500 13px/1.25 Inter,sans-serif;color:var(--grijs-d);white-space:nowrap}
/* aria-selected is de waarheid voor een schermlezer, de klasse is er voor het
   oog. Beide worden in js/klant.js samen gezet, nooit apart. */
.tab.aan{color:var(--ink);border-bottom-color:var(--or)}
.tab.aan .tab-naam{color:var(--ink)}
/* Het bedrag dat nog openstaat, in het accent. Dat is het enige cijfer waarvoor
   iemand hier binnenkomt; het hoort zichtbaar te zijn zonder één klik. */
.tab .tab-bij.let{color:var(--or-d);font-weight:600}

/* De aanwijzing dat er nog een tabblad naast staat. Alleen zichtbaar zolang er
   echt nog iets te schuiven valt, anders is het een leugen in beeld. */
.tabbuiten::before,.tabbuiten::after{content:"";position:absolute;top:0;bottom:1px;width:40px;pointer-events:none;
  opacity:0;transition:opacity .18s}
.tabbuiten::before{left:0;background:linear-gradient(90deg,var(--paper),rgba(245,243,240,0))}
.tabbuiten::after{right:0;background:linear-gradient(270deg,var(--paper),rgba(245,243,240,0))}
.tabbuiten.meer-links::before{opacity:1}
.tabbuiten.meer-rechts::after{opacity:1}

.paneel[hidden]{display:none}
.paneel:focus{outline:none}

/* ---------- de foto van de wagen bij een huur ----------
   Een klant herkent "Adria Twin 640 SLB Supreme" niet aan die naam, wel aan het
   beeld. De witte productfoto's staan al in img/wit/ en data/klanten.json weet
   welke bij welke huur hoort. */
.regel-foto{grid-template-columns:132px 1fr auto}
.beeld{width:132px;aspect-ratio:3/2;border-radius:10px;background:var(--paper);overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.beeld img{width:100%;height:100%;object-fit:contain;display:block}
/* Geen foto is geen gebroken beeld: een rustig vlak met de naam erin. Dat
   gebeurt wanneer aanbod.json een wagen niet kent, of wanneer het bestand
   ontbreekt; js/klant.js schakelt daar dan zelf naar over. */
.beeld-leeg{border:1px dashed var(--paper-2);padding:8px}
.beeld-leeg span{font:600 11.5px/1.3 Inter,sans-serif;color:var(--grijs-d);text-align:center;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- het document ophalen ----------
   Op de plek waar de klant zijn contract of factuur openslaat, staat de knop
   die het echte blad opent. */
.doc-rij{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:20px}
.doc-rij .btn{min-height:48px;padding:13px 22px;font-size:15px}
.doc-uit{font-size:13.5px;color:var(--grijs-d);line-height:1.55;max-width:44ch}
.doc-geen{margin-bottom:20px;font-size:14px;color:var(--grijs-d);line-height:1.65;
  border-left:3px solid var(--paper-2);padding-left:14px}
.doc-geen a{color:var(--or-d);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;min-height:44px}

@media(max-width:860px){
  .tab{min-height:64px;padding:12px 15px 13px}
  .tab .tab-naam{font-size:.98rem}
  /* Foto links, tekst rechts, en de stand eronder over de volle breedte. De
     foto kleiner maken is beter dan haar wegnemen: zij is juist de reden dat
     iemand zijn huur herkent zonder te lezen. */
  /* align-items:start en niet de center van de brede weergave: naast drie
     regels tekst hangt een gecentreerde foto er los bij. Meteen ook het net
     tegen uitrekken, want een rasterkind rekt standaard mee en dan is de
     aspect-ratio van .beeld weg. */
  .regel-foto{grid-template-columns:92px 1fr;align-items:start}
  .regel-foto .regel-rechts{grid-column:1 / -1}
  .beeld{width:92px}
}
/* Pas onder de 360 px kleiner: op een gewone telefoon van 390 px is 92 px de
   maat waarop iemand zijn wagen nog herkent. */
@media(max-width:359px){
  .regel-foto{grid-template-columns:76px 1fr}
  .beeld{width:76px}
}